Question

所以我是JavaScript的新手，正在努力通过div“用户列表”向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值。

Answer 1

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

在MutationObserver回调中，使用let p = Promise.resolve(); for (let i = 0; i < 10; i++) { p = p.then(_ => new Promise((resolve, reject) => { setTimeout(function() { console.log(i); if (i == 2) { reject("BREAK HERE"); } else { resolve(); } }, Math.random() * 1000) })); } p.catch(err => { console.log(err); })查找尚未复选框的querySelectorAll。（为简明起见，在添加复选框时，请将.user属性添加到data-，以使具有该.user属性的.user不会在未来。）只需插入复选框即可进行回调。

要侦听动态插入的元素上的复选框更改事件，请使用事件委托：侦听父（data-）上的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;
}

为每个元素添加复选框

1 个答案: