Question

对不起，如果这是一个愚蠢的问题，但是我正在为某个网站做某事，无法解决这个问题。

如何使此div出现在第一次单击按钮时，在数组中循环，然后在数组中的最后一项之后消失？

var myArray = ["Hello", "Thank you", "Goodbye"];
var myIndex = 1;
var print = document.getElementById('print');

print.innerHTML = myArray[0]; //Print first value of array right away.

function nextElement() {
  print.innerHTML = myArray[myIndex++ % myArray.length];
};

#notfound {
  background: #2abfffff;
  padding: 19px;
  margin: 15px;
  color: #fff;
}

<div id="notfound">
  <p><span id="print"></span>.</p>
</div>

<a id="click" href="#" onclick="nextElement();">Click</a>

JSfiddle：http://jsfiddle.net/jBJ3B/382/

Answer 1

由于您不希望div在首次单击之前出现，因此请用//Print first value of array right away.删除该行。

一种选择是从索引-1开始，在索引为0时使元素可见，在索引大于或等于数组的长度时隐藏元素：

var arr = ["Hello", "Thank you", "Goodbye"];
var index = -1;
var print = document.getElementById('print');

function nextElement() {
  index++;
  if (index >= arr.length) {
    print.style.visibility = 'hidden';
    return;
  }
  if (index === 0) print.style.visibility = 'visible';
  print.textContent = arr[index];
}

#notfound {
  background: #2abfffff;
  padding: 19px;
  margin: 15px;
  color: #fff;
}
.print {
  visibility: hidden;
}

<div id="notfound">
  <p><span id="print"></span>.</p>
</div>

<a id="click" href="#" onclick="nextElement();">Click</a>

如果您需要在再次点击时重新出现该元素，请使用模将最后的index设置为-1：

var arr = ["Hello", "Thank you", "Goodbye"];
var index = -1;
var print = document.getElementById('print');

function nextElement() {
  index++;
  if (index >= arr.length) {
    print.style.visibility = 'hidden';
    index = -1;
    return;
  }
  if (index === 0) print.style.visibility = 'visible';
  print.textContent = arr[index];
}

#notfound {
  background: #2abfffff;
  padding: 19px;
  margin: 15px;
  color: #fff;
}
.print {
  visibility: hidden;
}

<div id="notfound">
  <p><span id="print"></span>.</p>
</div>

<a id="click" href="#" onclick="nextElement();">Click</a>

Answer 2

您可以在nextElement（）内部检查该元素是否为最后一个元素，然后仅隐藏div。

   function nextElement() {
      print.innerHTML = myArray[myIndex++%myArray.length];
      if(myIndex>myArray.length){
        document.getElementById("notfound").style.visibility = "hidden";
      }
   };

JSFiddle：http://jsfiddle.net/jBJ3B/384/

Answer 3

这是您要做什么吗？http://jsfiddle.net/yvbenitah/jBJ3B/393/。

如果是，则仅添加该行：

document.getElementById('notfound').style.display = 'none';

循环单击，在第一次/最终单击时显示和隐藏文本/ div

3 个答案: