如何遍歷數組並在jquery中單擊時打印出帶有類的元素？

Question

單擊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();
            });
      });
    });

Answer 1

嘗試僅設置一次回調：

$(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>

單擊此處運行實時示例。

Answer 2

這個想法是您將一次顯示數組中的每個元素。 計數器將對循環顯示的元素數進行計數（這意味着一旦顯示了數組中的所有元素，它將被重置為第一個）。 您將需要以下代碼：

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;
    }
  });
});

您可以運行下面的代碼片段以查看此內容：

 $(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>

如果您願意的話，這也是JS Fiddle鏈接。

如何遍歷數組並在jquery中單擊時打印出帶有類的元素？

問題描述

2 個解決方案

解決方案1
0 2016-05-09 18:24:53

解決方案2
0 2016-05-09 18:54:55

如何遍歷數組並在jquery中單擊時打印出帶有類的元素？

問題描述

2 個解決方案

解決方案1 0 2016-05-09 18:24:53

解決方案2 0 2016-05-09 18:54:55

解決方案1
0 2016-05-09 18:24:53

解決方案2
0 2016-05-09 18:54:55