JavaScript切换不使用具有相同类属性的多个元素

我正在尝试为“活动”CSS类切换“禁用”，以便在单击时更改某些SVG的填充属性

我能够正确地更改第一个元素，但在尝试使用第二个和第三个SVG时，它会更改第一个div中第一个元素的颜色

HTML

   <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>

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');
    }
}

您使用的是返回文档中与提供的选择器匹配的第一个元素

要获得多个元素，您需要使用它来返回与选择器匹配的静态元素。此时，您需要循环遍历节点列表并操作类

但是，由于您试图以事件调用元素为目标，我认为您可以通过引用该元素来简化它

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

并将

onclick

处理程序更改为

onclick=“toggleColor（this，event）；”

下面是一个简短的片段：

功能切换颜色（el，e）{
el.classList.toggle（'disable'）；
el.classList.toggle（'active'）；
}

.disable{color:#ccc}
.active{color:#0095ee；}

为什么会发生这种情况？ 由于有多个元素的类为

heart

，因此它不知道在哪个元素上执行脚本！这就像一个老师试图给鲍勃打电话，而班上有5个人叫鲍勃

我们如何解决这个问题？ 您可以通过在脚本中提供元素的引用来更改

onclick

中的函数，如：

onclick=“myFunction（this）”

。现在在javascript中，您可以对元素执行任何需要的操作

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

试试看！运行下面的示例

功能切换颜色（元素）{
toggleHeart=元素；
if（toggleHeart.classList.contains（'disable'））{
toggleHeart.classList.remove（'disable'）；
toggleHeart.classList.add（'active'）；
}否则{
toggleHeart.classList.remove（'active'）；
toggleHeart.classList.add（'disable'）；
}
}

。禁用{
颜色：蓝色；
}
.主动{
颜色：红色；
}

点击我！
点击我！
点击我！
点击我！

是否将脚本标记添加到文档中？如果是这样的话，它会被添加到页面的底部吗？嘿，伙计，只是玩了你的代码，工作得很完美。我不知道所有相同类的选择器以及带有“this”和“event”的处理程序。我也很感谢你花时间来做这件事，发现了很多方法让一个简单的动作起作用。谢谢！