javascript - 处理多个 document.querySelector 结果

Question

我有以下基本的 HTML:

<h2>List 1</h2>

<ul class="list-unstyled list">
    <li class="col-md-3 col-sm-6 col-xs-6" id="plumespur">plumespur</li>
    <li class="col-md-3 col-sm-6 col-xs-6" id="catflawed">catflawed</li>
    <li class="col-md-3 col-sm-6 col-xs-6" id="drudgemuddy">drudgemuddy</li>                            
    <li class="col-md-3 col-sm-6 col-xs-6" id="lungspignut">lungspignut</li>
</ul>

<h2>List 2</h2>

<ul class="list-unstyled list">
    <li class="col-md-3 col-sm-6 col-xs-6" id="spongelever">spongelever</li>
    <li class="col-md-3 col-sm-6 col-xs-6" id="stringstick">stringstick</li>
    <li class="col-md-3 col-sm-6 col-xs-6" id="levertorch">levertorch</li>
    <li class="col-md-3 col-sm-6 col-xs-6" id="gravelclock"i>gravelclock</li>
</ul>

我有一些 CSS 和 JS 代码可用于创建“添加到收藏夹”功能，因此用户可以单击每个列表项旁边的心形，并将列表项值添加到 LocalStorage。

这是 JS:

var ct = 0;
var foo = JSON.parse(localStorage.getItem('foo')) || [];

if (foo) { // count elements
    for (var i = 0; i < foo.length; i++) {
        ct ++;
    }
} else {
    ct = 0;
}

var list = document.querySelector('.list');

if (list) {

    document.querySelector('.list').addEventListener('click', function(e) {
        var id = e.target.id;
        var item = e.target;
        var nelly = ct++
        var newCt = "" + nelly + ""; // need to wrap ID in speech marks to get delete element functionality to work
        var findme = foo.findIndex(e => e.name == id);
        if (!id) return;
        if (findme == -1) {
            foo.push({ id: newCt, name: id });
            item.className = 'col-md-3 col-sm-6 col-xs-6 fav';
        } else {
            foo.splice(findme, 1)
            item.className = 'col-md-3 col-sm-6 col-xs-6 nofav';
        }
        localStorage.setItem('foo', JSON.stringify(foo));
    });

}

您可以在此页面上查看代码的运行情况: https://codepen.io/paperknees/pen/pdGKQv

我遇到的问题是收藏夹功能仅适用于第一个 ul 元素。

红心出现在第二个方 block 中，但添加到收藏夹功能不会触发。

大概是因为JS中的这一段:

var list = document.querySelector('.list');

if (list) {

因为有两个具有 list 类的 UL 元素，这意味着它适用于第一个 block ，并忽略任何其他 block 。

我想知道如何更改代码以便我可以处理页面上任意数量的 ul.list block ？

我假设我需要某种循环解决方案来遍历 document.querySelector 甚至使用 document.querySelectorAll('ul.list') 但我不太明白如何修改我的代码以循环遍历它。

Answer 1

document.querySelector()只会返回第一个元素。没有什么可循环的。你必须使用 document.querySelectorAll()获取所有 .list 元素。

var lists = document.querySelectorAll('.list');

if (lists.length) {
  lists.forEach(list => {
    list.addEventListener('click', e => {
      if (!e.target.id) return;

      var id = e.target.id;
      var item = e.target;
      var nelly = ct++;
      var newCt = "" + nelly + ""; // need to wrap ID in speech marks to get delete element functionality to work
      var findme = foo.findIndex(e => e.name == id);

      if (findme == -1) {
        foo.push({ id: newCt, name: id });
        item.className = 'col-md-3 col-sm-6 col-xs-6 fav';
      } else {
        foo.splice(findme, 1)
        item.className = 'col-md-3 col-sm-6 col-xs-6 nofav';
      }

      localStorage.setItem('foo', JSON.stringify(foo));
    });
  });
}

https://codepen.io/anon/pen/MOLXMy