Question

我有一个数组，商店，其中包含三个图像。我试图在每次单击按钮时以升序显示此数组中的每个图像。

即：首先不应该有任何图像，第一次单击按钮时，数组的第一个图像应加载到类level上。

我该如何实现？

function store()
{
var level=['https://via.placeholder.com/75x75?text=1','https://via.placeholder.com/75x75?text=2','https://via.placeholder.com/75x75?text=3'];

}

<div class="level" style=" width=100px; height:100px; border:2px solid #000;">
<img src="" id="levelimage"  style=" width=100px; height:100px;"/>
</div>

<button onclick="store()">Click me</button>

Answer 1

我对您的要求有些困惑，但是我认为这可以解决问题：

 var i = 0;
 function store() {
  var level = ['https://via.placeholder.com/75x75text=1','https://via.placeholder.com/75x75?text=2','https://via.placeholder.com/75x75?text=3']
  document.querySelector("img").src=level[i++];
  if (i>level.length-1)i=0;
}

 <div class="level" style=" width=100px; height:100px; border:2px solid #000;">
  <img src="" id="levelimage"  style=" width=100px; height:100px;"/>
</div>

<button onclick="store()">Click me</button>

Answer 2

引入一个全局变量i，无论它是哪个函数调用，它都将保持一致，并在每次单击时将其增加一，还使用DOM选择您的img标签并更改其src

var i=0;
function store() {
    var level=['https://via.placeholder.com/75x75?text=1','https://via.placeholder.com/75x75?text=2','https://via.placeholder.com/75x75?text=3'];
    document.querySelector(".level").firstChild.src=level[i];
    i+=1;
}

Answer 3

// A named function, which expects two arguments:
// e: the Event Object, passed automatically from
//    EventTarget.addEventListener();
// haystack: the array of images.
function imageProgress(e, haystack) {

  // finding the relevant image by navigating the DOM:
  // e.target gives the element that initiated the event,
  // previousElementSibling finds the previous sibling that is
  // an element, Element.querySelector() finds the first (if any)
  // element that matches the supplied CSS selector:
  let target = e.target.previousElementSibling.querySelector('img'),

    // finding the current image:
    currentImage = target.src,

    // finding the index of the current image within the
    // array of images (this returns -1 if the image
    // is not found):
    currentIndex = haystack.indexOf(currentImage);

  // updating the src property of the <img> element;
  // we first increment the currentIndex variable, and
  // divide that updated index by the length of the Array.
  // if there is no current image shown (or the src can't be
  // found in the Array) we start at the first array-index;
  // otherwise we increment through the Array:
  target.src = haystack[++currentIndex % haystack.length];
}
let images = ['https://via.placeholder.com/75x75?text=1', 'https://via.placeholder.com/75x75?text=2', 'https://via.placeholder.com/75x75?text=3'],

  // finding the <button> element:
  button = document.querySelector('button');

// using unobtrusive JavaScript to bind the event-handler,
// using an arrow function:
button.addEventListener('click', (e) => {
  imageProgress(e, images)
});

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.level {
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  display: flex;
}

.level img {
  margin: auto;
}

.level,
button {
  margin: 1em;
}

<div class="level">
  <img src="" id="levelimage" />
</div>

<button>Click me</button>

JS Fiddle demo。

参考文献：

从每个按钮上的数组中释放图像

3 个答案: