如何有效地创建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 +网址，或有其它更有效的方法？

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。

Answer 2

您可能可以设置命名模式并使用委派在图像容器上创建事件处理程序。

您可以检查事件的目标是否为图像并检索其ID。使用该ID，您可以使用您设置的模式交替更改图像。

Answer 3

达到这一目的有多种解决方案，但是这是迄今为止最简单的方法：

1. 环绕你的图像对在父<div>
2. 使用.toggleClass()切换的一类，说.hide，在图像在元素

该解决方案假定您有对图像:)看例子证明了概念：

$(document).ready(function() { 
 
    $('img').click(function() { 
 
    console.log($(this).siblings()); 
 
    $(this).add($(this).siblings()).toggleClass('hide'); 
 
    }); 
 
});

/* For layout only */ 
 
div { 
 
    display: inline-block; 
 
} 
 

 
/* Used to hide image */ 
 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div>

Answer 4

试试这个：

jQuery(document).ready(function($) { 
 
    var $imgBlock = $('#images'); 
 
    var html = ''; 
 
    var imgArr = [ 
 
    'http://i0.wallpaperscraft.com/image/surface_shape_metal_116716_200x300.jpg', 
 
    'http://i0.wallpaperscraft.com/image/universe_space_face_rocket_116714_200x300.jpg', 
 
    'http://i0.wallpaperscraft.com/image/letter_surface_wooden_116674_200x300.jpg', 
 
    'http://i0.wallpaperscraft.com/image/mountains_lake_reflection_116663_200x300.jpg', 
 
    'http://i1.wallpaperscraft.com/image/leaf_drops_surface_116678_200x300.jpg', 
 
    'http://i1.wallpaperscraft.com/image/candle_spruce_christmas_decoration_116684_200x300.jpg' 
 
    ]; 
 

 
    $.each(imgArr, function(index, url) { 
 
    html += (index % 2 === 0) ? '<div>' : ''; 
 
    html += '<img src="' + url + '"/>'; 
 
    html += (index % 2 === 1 || index === imgArr.length - 1) ? '</div>' : ''; 
 

 
    }); 
 

 
    $imgBlock.append(html); 
 

 
    $imgBlock.on('click', 'img', function(e) { 
 
    $(this).parent('div').find('img').removeClass('red'); 
 
    $(this).addClass('red'); 
 
    }); 
 
});

img { 
 
    border: 2px solid #ccc; 
 
} 
 

 
.red { 
 
    border: 2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="images"></div>