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元素时，都会为.hide()调用#container。如你所见，我改变了一点。您必须创建span元素，将其隐藏，然后将其附加到#container，就像这样;

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

第二个问题在于您的.click()功能。你的选择器选择所有的span元素，有选择隐藏元素或第一个元素的伪选择器等。一起使用你可以选择这样的第一个隐藏元素;

$('#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);
    });
});

但是，当然，如果您希望同时fadeIn所有span元素，您可以使用您的代码;

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

Here是您的代码示例。

Answer 2

以下是您的一个选择：

$('span').hide();
var i = 1;

$("#button").click(function(){
    if (i <= $("#container > span").size()){
        $("#container span:nth-child("+i+")").fadeIn(450);  // shows nothing
        if (i < $("#container > span").size()){
            i++;
        }
        else {
            $(this).attr("disabled", true)
        }
    }    
});

请参阅此处的示例 - http://jsfiddle.net/xhMnt/2/

希望它有所帮助。亚历

Answer 3

Alex's answer是一种非常可靠的方式，可以逐个显示跨度。如何从AJAX响应创建跨度取决于PHP脚本返回的数据类型。如果响应如下：

[
    "Some",
    "words",
    "via",
    "JSON"
]

......这很简单：

$.ajax({
    type: "GET",
    dataType: 'json',
    url: "request.php",
    success: function(data, status) {
        var container = $("#container");
        var word;

        for (word in data) {
            $('<span />').append(word).appendTo(container);
        }
    }
});

另一方面，如果响应如下：“Some words as plaintext”，则必须执行以下操作：

$.ajax({
    type: "GET",
    dataType: 'text',
    url: "request.php",
    success: function(data, status) {
        var container = $("#container");

        var words = data.split(' ');
        var word;

        for (word in words) {
            $('<span />').append(word).appendTo(container);
        }
    }
});

注意我已将dataType更改为text，并添加了变量words，其中split()是空格字符的结果。

我希望这会对你有所帮助。

Answer 4

这样做

$("#container span:eq(" + ($("#container span.active").removeClass("active").fadeOut().index()+1) + ")").addClass("active").fadeIn();

在此处查看演示：http://jsfiddle.net/diode/y7qdV/5/

Answer 5

宣布两个变种：

var arr = [];
var inc = 0;

在ajax调用之后，将单词存储到数组中：

for (i = 0;  i < 10;  ++i)
                        arr.push(words[i]);
                }

然后：

$("#button").click(function(){
  while (inc < arr.length) {
        $("#container").html("<span>"+words[i]+"</span>");
          inc++; 
    });

我没有测试过这个。希望这会有所帮助。

单击按钮单独显示字符串数组的元素

5 个答案: