Question

我在文件夹中设置了几乎（30）的图像，当我逐个点击图像时我想要交换图像它必须消失并在同一个地方显示另一个图像我已经编写了一个Jquery点击功能，但是由于我的脚本很长，它提供了一个交换图像的慢速过程，并且它可以帮助我简化这些代码。提前谢谢

＆＃13;

Cluster 1.0.6

＆＃13;

$(document).ready(function(){
    $(".swap").click(function(){
      $(this).attr("src","./images/picture2.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture3.png");
      $(this).click(function(){
      $(this).attr("src","./images/picture4.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture5.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture6.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture7.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture8.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture9.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture10.bmp");
      $(this).click(function(){
      $(this).attr("src","./images/picture11.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture12.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture13.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture14.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture15.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture16.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture17.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture18.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture19.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture20.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture21.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture22.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture22.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture23bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture24.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture25.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture26.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture27.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture28.bmp");
	  $(this).click(function(){
      $(this).attr("src","./images/picture29.bmp");
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
	});
	});
	});    
	});
	});
	});
    });
    });
    });
    });

＆＃13;

Answer 1

例如：

var max = 30;    
var current = 1;
$(document).ready(function(){
    $(".swap").click(function(){
        current++;
        $(this).attr("src","./images/picture"+current+".bmp");
        if (current == max) current = 0;
    });
});

如果您的图像实际上是按照您提供的示例命名的话，这将起作用。或者，您也可以将图像名称存储在表格中，并使用current作为表索引更新完整图像。

当然我假设它应该在30之后返回到picture1.bmp。你也可以在切换src之前进行检查并简单地返回。

Answer 2

只需使用c++增加每次点击的值。如果less 30与Ternary operator一起使用，则限制使用

＆＃13;

$(document).ready(function() {
var c=2;
  $(".swap").click(function() {
  c = c<30 ? c : 2; //allow only less then 30 else  reset to 2
    $(this).attr("src", "./images/picture"+(c++)+".bmp");
    console.log($(this).attr("src"))
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="./images/Picture1.bmp" class="swap">
</div>

＆＃13;

使用jquery单击时如何交换20多个图像

2 个答案: