JavaScript Toggle 不适用于具有相同类属性的许多元素

Question

我正在尝试切换“活动”CSS 类的“禁用”，以使某些 SVG 的填充属性在单击时发生变化。我能够正确更改第一个元素，但是当尝试对第二个和第三个 SVG 进行相同操作时，它会更改第一个 div 内第一个元素的颜色。超文本标记语言   <div>       <svg onclick="toggleColor()" class="home__like disable heart">           <use xlink:href="img/sprite.svg#icon-heart-full"></use>       </svg>   </div>   <div>       <svg onclick="toggleColor()" class="home__like disable heart">           <use xlink:href="img/sprite.svg#icon-heart-full"></use>       </svg>   </div>   <div>       <svg onclick="toggleColor()" class="home__like disable heart">           <use xlink:href="img/sprite.svg#icon-heart-full"></use>       </svg>   </div>CSS.disable {    fill: #fff;}.active {    fill: $color-primary;}JavaScriptfunction toggleColor() {    const toggleHeart = document.querySelector('.heart');    if(toggleHeart.classList.contains('disable')) {        toggleHeart.classList.remove('disable');        toggleHeart.classList.add('active');    } else {        toggleHeart.classList.remove('active');        toggleHeart.classList.add('disable');    }}

Answer 1

您正在使用.querySelector()它返回文档中与提供的选择器匹配的第一个元素。

要获取多个元素，您需要使用.querySelectorAll()它将返回与选择器匹配的元素的静态NodeList。此时，您需要循环遍历 NodeList 并操作类。

但是，由于您尝试定位事件调用元素，我认为您可以通过引用该元素来简化它。

function toggleColor(el, e) {
    el.classList.toggle('disable');
    el.classList.toggle('active');
}

并将您的onclick处理程序更改为onclick="toggleColor(this,event);"

这是一个快速片段：

function toggleColor(el, e) {

    el.classList.toggle('disable');

    el.classList.toggle('active');

}

.disable { color: #ccc }

.active  { color: #0095ee; }

<div>

    <svg class="disable" onclick="toggleColor(this,event);" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

 </div>

 <div>

     <svg class="disable" onclick="toggleColor(this,event);" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

 </div>

 <div>

     <svg class="disable" onclick="toggleColor(this,event);" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

 </div>

Answer 2

为什么会发生这种情况？

由于有多个具有 类的元素heart，因此它不知道要在哪个元素上执行脚本！这就像一个老师试图给鲍勃打电话，而班级里有 5 个叫鲍勃的人。

我们该如何解决这个问题？

onclick您可以通过在脚本中提供元素的引用来更改 中的函数，如下所示： onclick="myFunction(this)"。现在，在 javascript 中，您可以对元素执行任何您需要的操作。

尝试一下！运行下面的例子！

function toggleColor(element) {

    toggleHeart = element;

    if(toggleHeart.classList.contains('disable')) {

        toggleHeart.classList.remove('disable');

        toggleHeart.classList.add('active');

    } else {

        toggleHeart.classList.remove('active');

        toggleHeart.classList.add('disable');

    }

}

.disable {

    color: blue;

}

.active {

    color: red;

}

<!--                      vvv  below we used the "this" keyword which references to the svg element -->

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>