javascript - 使用 jquery 定位事件目标

Question

在我的网站上，我有 12 个图像和 12 个开关。当按下开关时，我使用 jquery 将图像的过滤器更改为灰度。现在我的代码将每个 img 都转换为灰度，我想知道如何仅定位与按下的开关共享 div 的 img。

$('.switch').click(function() {
    $('img').css("-webkit-filter", "grayscale(100%)");
});

此外，我想知道如何选择 .switch(如果已单击)。这样，当您再次单击 .switch 时，颜色就会恢复

Answer 1

假设 switch 和 img 位于同一个容器中，如下所示:

<div>
  <button class="switch" type="button">Switch</button>
  <img src="image.png"/>
</div>

以下应该有效:

$('.switch').click(function() {
    $(this).siblings('img').css("-webkit-filter", "grayscale(100%)");
});

siblings