向每個元素添加復選框

Question

因此，我是JavaScript的新手，正在努力為id “ userlist”的div每個元素添加復選框。

這是我的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回調內部，使用querySelectorAll查找尚未具有復選框的.user 。 （為簡明起見，在添加復選框時，請將data-屬性添加到.user ，以使具有該data-屬性的.user將來不會再次被迭代。）只需插入復選框即可打回來。

要偵聽動態插入的元素上的復選框更改事件，請使用事件委托：偵聽父級 userlist上的change事件。 在用戶列表中選中的復選框將觸發事件，該事件將冒泡到用戶列表，並且偵聽器可以檢查觸發的事件是否來自用戶腳本創建的元素之一-如果是，則僅從事件目標導航（復選框）到其父級，然后您可以記錄父級的ID。

 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>