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

问题描述：

我正在寻找一种方法，将图像A更改为B，将B更改为A，只需点击即可。如何有效地创建100个切换图像按钮？

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

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

只是确保...图像将是所有100相同或然而，许多要在正确的？ – Poootaatoooo

配对将被修复。图像将彼此不同。因此，如果A已经与B配对，则图像A或B将不会与任何其他图像配对。 – Velo

答

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

然后，使用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。

我试过了，但没有奏效。我做错了什么？ https://codepen.io/Velocodes/pen/MEyjZZ – Velo

你的CodePen没有加载jQuery库......但它不仅仅是这样。请参阅编辑。 ;） –

答

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

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

答

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

环绕你的图像对在父<div>
使用.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>

答

试试这个：

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>

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

相关推荐