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代码，可用于创建＆＃34;添加到收藏夹＆＃34;功能，因此用户可以单击每个列表项旁边的心脏，并将列表项值添加到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元素。

心形出现在第二个区块中，但添加到收藏夹功能并不会触发。

可能是因为JS中的这一部分：

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

if (list) {

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

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

我认为我需要某种循环解决方案来遍历document.querySelector甚至使用document.querySelectorAll('ul.list')，但我无法理解如何修改我的代码循环使用。

Answer 1

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

.list

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

处理多个document.querySelector结果

1 个答案: