javascript - 单击按钮分别显示字符串数组的元素

Question

我从服务器端收到一条文本，我想为每次按钮点击显示一个词。这是我的方法:

$(document).ready(function() 
            {       
                $.ajax(
                {
                    type: "GET",
                    dataType: 'json',
                    url: "request.php",
                    success: function (response){

                var words = text.match(/\b([a-z]{1,})\b/gi);  //text is an element of json array
                        for (i = 0;  i < 10;  ++i)
                            $("#container").append("<span>"+words[i]+"</span>").hide();
                    }           
                });
            });

我的显示文字的功能。它不起作用，只是为了解释我正在尝试做的事情。

    $(function() 
    {           
        $("#button").click(function(){
            $("#container span").fadeIn(450);  // shows nothing
        });
    }); 

Jquery 选择器无法选择跨度，因为它们不在 html 中。你能给我一个解决方案吗？

(当我写 $("#container").fadeIn(450); 它显示了所有的单词。)

Answer 1

你的代码有两个问题；

您正在使用 .append() 将 span 元素附加到 #container 但它返回 #container jQuery 对象。因此，每次附加 span 元素时，您都会为 #container 调用 .hide()。正如你所看到的，我改变了一点。您必须创建 span 元素，将其隐藏，然后将其附加到 #container，如下所示；

$("<span>"+words[i]+" </span>").hide().appendTo("#container");

第二个问题是您的 .click() 函数。您的选择器选择所有跨度元素，有用于选择隐藏元素或第一个元素等的伪选择器。将它们一起使用，您可以像这样选择第一个隐藏元素；

$('#container span:hidden:first');

最后在您的代码中实现这些会给我们这个结果；

$(document).ready(function() {
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: "request.php",
        success: function(response) {
            var words = text.match(/\b([a-z]{1,})\b/gi); //text is an element of json array
            for (i = 0; i < 10; ++i) {
                $("<span>"+words[i]+" </span>").hide().appendTo("#container");
            }
        }
    });
});

$(function() {
    $("#button").click(function() {
        $('#container span:hidden:first').fadeIn(450);
    });
});

但是当然，如​​果您想要一次淡入所有span元素，您可以使用您的代码；

$("#container span").fadeIn(450);

Here是您的代码示例。