循環中的事件查找器

我已經將一個單擊事件添加到了一個複選框，以便在單擊它時檢查另一個元素的類。這是一個循環，由於某些原因，它只能在第一行代碼中工作。循環中的事件查找器

任何建議如何解決這個問題？

PHP：

while ($row_list = mysqli_fetch_array($res_list)) { 
    $i++; 
    echo '<div class="checkbox">' . 
     '<label><input type="checkbox" id="del" name="del" value="ja">Ja ik wil deze toolbox verwijderen</label>' . 
     '</div>'; 
}

的Javascript：

document.querySelector('input[type="checkbox"]').addEventListener('click',() => { 
    document.querySelector('#submit_delete').classList.remove('disabled') 
});

來源

2017-06-09 Muiter

你介意如何使用循環？ – AtheistP3ace

你需要一個循環和結果的收集，使用querySelectorAll

[].forEach.call(document.querySelectorAll('input[type="checkbox"]'), 
    elm=> elm.addEventListener('click',() => 
    document.querySelector('#submit_delete').classList.remove('disabled') 
));

來源

2017-06-09 13:36:26 dandavis

由於dandavis指出，document.querySelector只會得到第一擊。如果您想獲得多個結果，則需要使用document.querySelectorAll。這將返回一個NodeList，你可以變成一個數組Array.from。

while ($row_list = mysqli_fetch_array($res_list)) { 
    $i++; 
    echo ' 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox" name="del" value="ja"> 
     Ja ik wil deze toolbox verwijderen 
     </label> 
    </div> 
    '; 
} 

<script> 
const deleteButton = document.querySelector('#submit_delete'); 
const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]')); 
checkboxes.forEach(el => el.addEventListener('click',() => 
    deleteButton.classList.remove('disabled') 
)) 
</script>

來源

2017-06-09 13:40:22

由於您使用'[] .from'，因此您可以將'forEach（）'回調作爲第二個參數傳遞給'.from（）'，並且它將在每個元素上執行，與forEach完全相同，但沒有雜散變量... – dandavis

可能不是我將如何實現它，但是當我寫這樣的例子時，我喜歡更羅嗦一些。對你和我來說顯而易見的可能不會是下一個讀這個答案的人:) –

循環中的事件查找器

回答

相關問題