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;

}

JavaScript

function 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您可以通过在脚本中提供元素的引用来更改 中的函数，如下所示：&nbsp;onclick="myFunction(this)"。现在，在 javascript 中，您可以对元素执行任何您需要的操作。尝试一下！运行下面的例子！function toggleColor(element) {&nbsp; &nbsp; toggleHeart = element;&nbsp; &nbsp; if(toggleHeart.classList.contains('disable')) {&nbsp; &nbsp; &nbsp; &nbsp; toggleHeart.classList.remove('disable');&nbsp; &nbsp; &nbsp; &nbsp; toggleHeart.classList.add('active');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; toggleHeart.classList.remove('active');&nbsp; &nbsp; &nbsp; &nbsp; toggleHeart.classList.add('disable');&nbsp; &nbsp; }}.disable {&nbsp; &nbsp; color: blue;}.active {&nbsp; &nbsp; color: red;}<!--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vvv&nbsp; below we used the "this" keyword which references to the svg element --><div onclick="toggleColor(this)" class="disable">&nbsp; &nbsp; Click Me!</div><div onclick="toggleColor(this)" class="disable">&nbsp; &nbsp; Click Me!</div><div onclick="toggleColor(this)" class="disable">&nbsp; &nbsp; Click Me!</div><div onclick="toggleColor(this)" class="disable">&nbsp; &nbsp; Click Me!</div>