javascript - 如何循环遍历数组并在 jquery 中点击类打印出元素?

标签 javascript jquery html css

当单击 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();
            });
      });
    });

最佳答案

尝试只设置一次回调:

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

点击here运行实例。

关于javascript - 如何循环遍历数组并在 jquery 中点击类打印出元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37122658/

相关文章:

javascript - 如何过滤可观察数组?

javascript - 如果 Typescript 只是输出到 Javascript,为什么要创建它作为一种单独的语言?

javascript - 为什么我的 ng-repeat 会循环遍历对象的空实例?

javascript - Jquery 使新插入的 div 可拖动

javascript - 从 jQuery 迁移到 Zepto

jquery - Bootstrap 4 navbar collapse .show class delay after .collapsing disable

html - 为什么类型为 ="submit"的输入框比给定的高度要矮?

javascript - Firebase功能独立线程?

javascript - Javascript 歌曲播放完毕后播放歌曲

jquery - 具有编辑/删除行为的 jqGrid 自定义按钮