javascript - 如何有效地创建 100 个切换图像按钮？

Question

我一直在寻找一种方法，只需将图像 A 更改为 B，将 B 更改为 A点击它们。

到目前为止，这就是我正在使用的。

<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
<script type="text/javascript">
$(document).ready(function(){
     $("#pixelbutton").click(function(){
         $("#pixelbutton").css({'display':'none'})
         $("#pixelbutton2").css({'display':'block'});
     })
     $("#pixelbutton2").click(function(){
         $("#pixelbutton2").css({'display':'none'})
         $("#pixelbutton").css({'display':'block'});
     })
})
</script>

该脚本适用于一对图像。现在如果我有 100 对图像。

"A <--> B" 
"C <--> D"
"E <--> F"

等等……

我是否必须复制正文 HTML 和脚本 100 次并更改它们的 ID+URL 还是有其他更有效的方法？

Answer 1

要创建数百个...首先，使用一个类。

然后，使用 data属性来存储“备用”URL。

<img class="pixelbutton" src="images/pixelbutton.png" data-altsrc="images/pixelbutton_press.png"/>
<script type="text/javascript">
$(document).ready(function(){
   $(".pixelbutton").click(function(){

    // Get the two values
    var src = $(this).attr("src");
    var altSrc = $(this).data("altsrc");

    // Switch them
    $(this).attr("src",altSrc).data("altsrc",src);
  });
})
</script>

这将适用于数以千计的.pixelbutton...
;)

---

编辑

根据其他 .data() documentation ，(我想知道 为什么 有两个不同的文档页面...) data-* 必须是小写的...因为在尝试获取 altSrc，它被解释为 alt-src。

我刚刚了解到...这是来自 jQuery 3 的奇怪新标准。

所以这里是 your CodePen updated .