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

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

然后，使用数据属性来存储"备用"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()文档，(我想知道为什么有两个不同的文档页面......(data-*必须是小写的......因为当试图得到altSrc时，它被解释为alt-src。

我刚刚了解到...这是一个非常奇怪的新标准，来自jQuery 3。

所以这是你的代码笔更新。

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>