图标上的Jquery toggleClass不会影响具有相同类的其他图标

Question

我有几个divs与bg-img（基本上是音频播放器按钮）相同的svg，我想切换每个点击元素的类而不影响其他元素。我真的不知道如何正确选择我点击的单个emelemnt，而不是同时选择所有这些。

html是：

<ol class="tracks">
  <li>some text
    <div class="play"></div>
  </li>
  <li>some text 
    <div class="play"></div>
  </li>
  ...
</ol>

我在每个div中放置相同的svg作为bg-img。

我当然无法切换.play因为我会同时更改所有divs，所以我尝试$this：

$('.play').click(function() {
  $this.toggleClass('clicked');
});

在clicked课程中，我只需更改bg-img（例如，从play.svg更改为pause.svg，反之亦然）。 显然我的Jquery有问题，但仍然是一个菜鸟，我无法弄清楚它会是什么。

如果你能帮助我，我真的很感激。 ^ _ ^

Answer 1

你的方法是正确的。它会工作。将您的js更新为：

$('.play').click(function() {
  $(this).toggleClass('clicked');
});

请参阅此处更改课程的示例：https://jsfiddle.net/ddan/zLx03L1u/1/