使用“单击”功能循环数组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用“单击”功能循环数组相关的知识，希望对你有一定的参考价值。
我想要它，这样无论何时单击按钮，它将更改为下一个背景图像。
var images = [
"http://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-2-Large.jpg",
"http://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-6-Large.jpg",
"http://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-1-Large.jpg"
]
for (var i = 0; i < images.length; i++) {
$("#changeBg").click(function() {
$("body").css("background-image", "images.length[i]");
}
答案
您的代码中存在一些问题。首先，您需要附加单个事件处理程序，并在每个连续的单击事件上遍历数组元素。在循环中附加事件处理程序只会产生冲突，因为您正在尝试多次执行相同的操作。
在单个事件处理程序中，您可以使用变量来跟踪数组中的当前位置，并在每次单击时增加它。 data属性是理想的选择。
其次，您需要实际使用数组元素中的值，而不是在引号中包含该引用。您还需要通过索引访问数组，而不是具体的length属性。
最后，您需要在url("...")的CSS属性中包装图像的URL。
var images = [
"https://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-2-Large.jpg",
"https://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-6-Large.jpg",
"https://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-1-Large.jpg"
]
$("#changeBg").click(function() {
var counter = $(this).data('counter') || 0;
$("body").css("background-image", 'url("' + images[counter % images.length] + '")');
$(this).data('counter', ++counter);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="changeBg">Change background</button>另一答案
Rory完美地解释了它并且还提到了你的代码有什么问题。主要问题是您无法跟踪按钮被点击的次数。
Rory使用data属性给出了一个非常好的解决方案。
但是，还有一种（或可能是更多）解决问题的方法。使用闭包。
var images = [
"http://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-2-Large.jpg",
"http://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-6-Large.jpg",
"http://helenspeyer.co.uk/wp-content/gallery/the-end-of-the-f-ing-world/The-end-of-the-f...ing-world-1-Large.jpg"
];
(function(){
var count = 0;
$("#changeBg").click(function(){
var imgNo = count % images.length;
document.body.style.backgroundImage = "url( " + images[imgNo] + ")";
count++;
});
})();
在这种情况下，事件处理函数对count变量进行了闭包。有关关闭的详细信息，我建议您浏览此页面 - > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
以上是关于使用“单击”功能循环数组的主要内容，如果未能解决你的问题，请参考以下文章