想要Javascript Button's图像彼此独立交换


Want Javascript Button's images to swap independently of one another

目前我有代码,导致图像改变时点击,但这段代码是在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>

在函数中使用$(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>