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

Displaying elements of a string array separately with button click

本文关键字：字符串 数组 元素 显示 按钮 单击      更新时间：2023-09-26

我从服务器端得到一个文本，我想为每个按钮单击显示一个单词。以下是我的方法:

$(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);它显示了所有的单词

你的代码有两个问题;

你使用.append()附加span元素到#container，但它返回#container jQuery对象。因此，每次添加span元素时，都要为#container调用.hide()。正如你所看到的，我做了一点改动。你必须创建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);
    });
});

当然，如果你想一次将所有的span元素设置为fadeIn，你可以使用这段代码;

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

下面是你的代码示例

给你一个选择:

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

希望有帮助。亚历克斯

Alex的回答是一个非常可靠的逐一显示跨度的方法。如何从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()是空格字符的结果。

可以了

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

查看这里的演示:http://jsfiddle.net/diode/y7qdV/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++; 
    });

我还没有测试过。

相关文章：