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属性存储＆＃34;替代＆＃34; 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

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

将图片对包裹在父<div>
使用.toggleClass()在元素中的图片中切换课程，例如.hide

此解决方案假设您有成对图片 :)请参阅概念验证示例：

＆＃13;

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

＆＃13;

/* For layout only */
div {
  display: inline-block;
}

/* Used to hide image */
.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 4

试试这个：

＆＃13;

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');
  });
});

＆＃13;

img {
  border: 2px solid #ccc;
}

.red {
  border: 2px solid red;
}

＆＃13;

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

＆＃13;

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

4 个答案: