Question

我正在努力让它无论何时单击按钮，它都会变为下一个背景图像。

this.markers = []

Answer 1

您的代码中存在一些问题。首先，您需要附加单个事件处理程序，并在每个连续的单击事件中遍历数组元素。在循环中附加事件处理程序只会产生冲突，因为您正在尝试多次执行相同的操作。

在单个事件处理程序中，您可以使用变量来跟踪数组中的当前位置，并在每次单击时递增它。 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>

Answer 2

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变量进行了闭包。有关关闭的详细信息，我建议您浏览此页面 - ＆gt; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

使用“单击”功能循环数组

2 个答案: