php - 希望 Javascript Button 的图像相互独立交换

Question

目前我的代码会在单击时导致图像发生变化，但是此代码位于 php HTML 循环中，因此事情变得很棘手，并且单击一个切换会使每个故事都激活切换，因为它是基于 CSS 运行的。如何让他们独立交换？

<script type="text/javascript">
 $(".buy").toggle(
      function() { $(".buy").css("background-image", "url(play3.png)");},
  function() { $(".buy").css("background-image", "url(play.png)");});
</script>
     <div class="layer1"> <span class="buy" id="{STORIES.story_id}6">
     <input type="image"   class="test"></input></span>

Answer 1

在函数中使用 $(this) 而不是 $(".buy") ， $(this) 专门指那个特定的按钮，而 $(".buy") 指的是所有具有类 'buy' 的元素。

<script type="text/javascript">
 $(".buy").toggle(
      function() { $(this).css("background-image", "url(play3.png)");},
  function() {$(this).css("background-image", "url(play.png)");});
</script>