如何为css操作选择一个类的多个对象

Question

这可能是一个简单的问题，也可能是不可能的。我试图使用querySelector（）函数为css操作选择特定类的对象。我有几个不同类的对象，我在主导航中使用链接根据点击的链接来切换对象。

我在这里使用php和jQuery的组合来实现这一目标。

这适用于单个对象：

php / HTML：

<div class="red box">Lorum</div>
<div class="blue box">Ipsum</div>
<div class="blue box">Ipsum</div>

我的导航php（我试图简化我正在做的事情，以便让事情变得更清晰）：

$value = "blue";
echo "<a href=\"#\" onclick=\"document.querySelector('.".$value."').classList.toggle('hover');\">Link</a>";

悬停动作与我之前在我的php中链接的css相对应，并且是一个简单的平铺翻转。

最终发生的事情是它对于给定类的第一个对象是否正确，但不适用于具有该类的任何其他对象。我尝试过使用querySelectorAll（）和getElementByClassname（），但我不知道我是做错了还是我试图做一些不可能的事情。写一个函数是一个更好的方法吗？

有什么建议吗？任何帮助，将不胜感激。感谢。

Answer 1

为锚添加ID

echo '<a href="#" id="link_blue">Link</a>';

然后添加一个事件处理程序

$('#link_blue').on('click', function() {
    $('.blue').toggleClass('hover');
});