时间戳

首页 > 解决方案 > 为每个元素添加复选框

javascript - 为每个元素添加复选框

问题描述

div所以我是 JavaScript 的新手，并且正在努力使用“用户列表”为每个元素添加复选框id。

这是我的 HTML：

<div id="userlist">  //Here's the element with the ID "userlist"
<div class="user me" id="user_9a9pkmz43nkp6t3rr383xlzcj99xmi4m">
    <div class="buttonholder">
        <div class="button color" style="background-color: rgb(0, 0, 0);"> 
</div>
        <div class="button tool eyes"></div>&nbsp;</div>
    <div class="usertext"><span class="username" style="text-decoration: none;">from Prairie Village, United States</span> <span id="chat">send chat msg</span></div>
</div>
<div class="user" id="user_7ku2rum35ko7nddwdpjd2c53zordfzzd">
    <div class="buttonholder">
        <div class="button color" title="click to show last line drawn by user" style="background-color: rgb(77, 255, 112);"></div>
        <div class="button tool eyes"></div>&nbsp;</div>
    <div class="usertext"><span class="username">Imp</span> <span class="ignore">ignore</span><span class="rename">rename</span></div>
</div>
<div class="user" id="user_id6rwedzewineum8t2f6xf2dbqejorfs" style="display: none;">
    <div class="buttonholder">
        <div class="button color" title="click to show last line drawn by user" style="background-color: rgb(255, 255, 255);"></div>
        <div class="button tool eyes"></div>&nbsp;</div>
    <div class="usertext"><span class="username">from an unknown place</span> <span class="ignore">ignore</span><span class="rename">rename</span></div>
</div>
</div>

所以我可以以某种方式为每个带有“用户”类的元素添加一个复选框，并在选中该复选框时获取该类的 ID 值，然后将该值记录到控制台？所以如果它得到检查。它会记录该类的 Id 值吗？

到目前为止，这是我设法刮掉的。我想以某种方式使用这个基本布局。请注意，这不起作用，这就是我在这里寻求帮助的原因。请不要对我太苛刻。

var muteArray = {};
var users = document.getElementById("userlist");

users.addEventListener('DOMSubtreeModified', function() {
muteArray = {};
for (let i = 0; i < users.childNodes.length; i++) {
if (users.childNodes[i].getElementsByClassName("mute")[0]) {
  if (users.childNodes[i].getElementsByClassName("mute")[0].checked) 
{
    console.log(muteArray) // Log the selected users Id value :( doesn't 
work.
  };
} else {

  let checkbox = document.createElement('input');
  checkbox.className = "mute";
  checkbox.type = "checkbox";
  checkbox.style.width = "30px";
  checkbox.style.height = "30px";
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      console.log("") //Maybe log Id's value here?
    } else {
      console.log("something")
    };
  });
  users.childNodes[i].insertBefore(checkbox, users.childNodes[i].getElementsByClassName("user")[0]);
};

所以如果一个元素的复选框被选中。做一个功能。该函数将记录该类的 Id 值。

标签： javascripttampermonkey

解决方案

首先考虑使用 MutationObserver 而不是 DOMSubtreeModified - MutationObserver 要快得多，并且不推荐使用 DOMSubtreeModified。

在 MutationObserver 回调中，用于querySelectorAll查找.user还没有复选框的 s。（简而言之，在添加复选框时，将data-属性添加到.user，以便.user具有该data-属性的 s 以后不会再次迭代。）只需插入复选框即可进行回调。

要监听动态插入元素上的复选框更改事件，请使用事件委托：监听父change级上的事件，. 在用户列表中选中的复选框将触发事件，这些事件将冒泡到用户列表，并且侦听器可以检查触发的事件是否来自您的用户脚本创建的元素之一 - 如果是，只需从事件目标导航（复选框）到它的父母，然后你可以记录父母的ID。userlist

const userlist = document.querySelector('#userlist');
new MutationObserver(() => {
  userlist.querySelectorAll('.user:not([data-has-checkbox])').forEach((userDiv) => {
    const checkbox = userDiv.insertBefore(document.createElement('input'), userDiv.children[0]);
    checkbox.type = 'checkbox';
    userDiv.dataset.hasCheckbox = true;
  });
}).observe(userlist, { childList: true });

userlist.innerHTML = `
  <div class="user me" id="user_9a9pkmz43nkp6t3rr383xlzcj99xmi4m"><div>content 1</div></div>
  <div class="user" id="user_7ku2rum35ko7nddwdpjd2c53zordfzzd"><div>content 2</div></div>
  <div class="user" id="user_id6rwedzewineum8t2f6xf2dbqejorfs" style="display: none;"><div>content 3</div></div>
`;

setTimeout(() => {
  userlist.insertAdjacentHTML(
    'beforeend',
    `<div class="user" id="user_7ku2rum35ko7nddwdpjd2c53zordfzzd"><div>content 4</div></div>`
  );
}, 2500);

userlist.addEventListener('change', ({ target }) => {
  if (target.matches('.user > input[type="checkbox"]')) {
    const userDiv = target.parentElement;
    console.log(userDiv.id);
  }
});
.user {
  border: 1px solid black;
}
<div id="userlist">

</div>

推荐阅读