如何有效地創建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>