如何循环遍历数组并在jquery中单击一个类打印出元素？

The array has values that i want to display on the screen one by one when the div #background is clicked, but then fade out when it is clicked and produce a new element. right now it produces the elements but they dont disappear and do not fadeIn? I am working with jquery and very new to this!

当单击div #background时,数组具有我想要在屏幕上逐个显示的值,但是当单击它时生成新元素时淡出。现在它产生了元素,但它们不会消失而且不会消失?我正在使用jquery并且对此非常新!

$(document).ready(function(){
        var arr = ["hello", "hi", "what is up"];
        $.each(arr, function(i, val){
            $("#background").click(function(){
            var element = "<h1>" + val + "</h1>";
            $(".contain").fadeIn("slow").append(element);
            $(element).remove();
            });
      });
    });

2 个解决方案

#1

Try to set the callback only once:

尝试只设置一次回调:

$(document).ready(function(){
    var arr = ["hello", "hi", "what is up"];
    var i = 0;
    $("#background").click(function(){
        var element = $( "<h1 style='display:none'>" + arr[i] + "</h1>" );
        $(".contain").html(element);
        element.fadeIn("slow")
        i =(i+1)  % arr.length;
    });
});

Html

<body>
<div id='background'>  <div class="contain">  click me  </div> </div>
</body>

Click here to run the live example.

单击此处运行实例。

#2

The idea is that you will show each element one at a time from the array. A counter will count the number of elements displayed in a circular manner (meaning once it is shown all the elements in the array, it will be reset to the first one). You will need the following code :

我们的想法是,您将从阵列中一次显示一个元素。计数器将计算以循环方式显示的元素数量(意味着一旦显示数组中的所有元素,它将被重置为第一个元素)。您将需要以下代码:

HTML :

<div id="background">
  <div class="contain">
    <div></div>
  </div>
</div>

CSS:

#background {
  height: 500px;
}

.contain {
  height: 200px;
  background-color: #ccc;
}

jQuery :

$(document).ready(function() {
  var arr = ["hello", "hi", "what is up"];
  var currentKey = 0;
  $("#background").click(function() {
    //alert("CurrentKey : " + currentKey);
    $(".contain").html(" " + arr[currentKey] + " ").hide().fadeIn(600);
    if (currentKey === (arr.length - 1)) {
      currentKey = 0;
    } else {
      currentKey = currentKey + 1;
    }
  });
});

You can run the snippet below to see this :

您可以运行下面的代码段来查看:

$(document).ready(function() {
  var arr = ["hello", "hi", "what is up"];
  var currentKey = 0;
  $("#background").click(function() {
    //alert("CurrentKey : " + currentKey);
    $(".contain").html(" " + arr[currentKey] + " ").hide().fadeIn(600);
    if (currentKey === (arr.length - 1)) {
      currentKey = 0;
    } else {
      currentKey = currentKey + 1;
    }
  });
});

#background {
  height: 500px;
}

.contain {
  height: 200px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="background">
  <div class="contain">
    <div></div>
  </div>
</div>

Here's also a JS Fiddle link if you prefer that.

如果您愿意,这里还有一个JS Fiddle链接。

#1