Question

如何在点击时仅使用Javascript逐个显示元素，在我的示例中，当我单击所有元素时立即显示，但我只需要一次单击 - 一个元素。如果你能展示出最简单的方法，我会很感激，为了能够理解它的运作方式

$(function() {
    var cars = ["audi", "bmw", "volvo"];
    var x = "";
    var i;
    for (i = 0; i <cars.length; i++) {
        x += cars[i] + "<br>";
    }

    document.getElementById("btn").onclick = function() {
        document.getElementById("text").innerHTML = x;
    }
});

Answer 1

您可以按如下方式更新代码。在刚开始时，您正在用空字符串初始化x。然后，对于每次单击按钮，使用new line标记附加数组中的元素。

＆＃13;

var cars = ["audi", "bmw", "volvo"];
var x = "";
var i = 0;

document.getElementById("btn").onclick = function() {
  if( i < cars.length) {
    x += cars[i++] + "<br>";
  }
  document.getElementById("text").innerHTML = x;
}

＆＃13;

<p id="text"></p>
<button id="btn">Result</button>

＆＃13;

Answer 2

<html> 
<script>
        var cars = ["audi", "bmw", "volvo"];
        var x = "";
        var count = 0;
          function appendArray(){

        if(count<cars.length){
        x += cars[count]+ "<br>";
            document.getElementById("appendText").innerHTML = x;
            count++;
            }else{
        count = 0;
        document.getElementById("appendText").innerHTML = "";
        }

     }
    </script>


    <p id="appendText"></p>
    <button onclick="appendArray()">Submit</button>
    </html>

Answer 3

以下是vanilla javascript中的一个解决方案：

var button = document.getElementsByTagName('button')[0];
var i = 0;

function addCar(i) {
    var cars = ['audi', 'bmw', 'volvo'];
    var paragraph = document.getElementsByTagName('p')[0];

    if (i < cars.length) {
        var newLine = document.createElement('br');
        var newCar = document.createTextNode(cars[i]);
        paragraph.appendChild(newLine);
        paragraph.appendChild(newCar);
    }
}

    
button.addEventListener('click',function(){addCar(i); i++;},false);

<p></p>
<button>Click for a New Car</button>

使用Javascript如何在点击时逐个显示元素

3 个答案: