Question

我正在尝试通过jQuery函数发送一个数组，并让它为数组中的每个单词设置动画。

var foo = [];

foo[0]= "test1";
foo[1]= "test2";
foo[2]= "test3";

$(document).ready(function(){

  $(".ansy").click(function(){ 

    $.each(foo,function(){

      $('.message').animate({'opacity': 0}, 2000, function () {
        $(this).text("enter text or variable here");
      }).animate({'opacity': 1}, 2000);

    });
  }); 

});

我正在使用我从stackoverflow上的另一个地方获得的代码块，当我将“输入文本或变量”替换为我想要的文本但无法通过数组时，该代码块有效。我一直在尝试使用$ .each函数，但我无法让它工作。想法是让一个字符串淡入然后淡出，然后让数组中的下一个字符串淡入，依此类推，直到它到达数组的末尾。任何帮助都会很棒。

Answer 1

这可能就是你要找的东西：

var foo = [];

    foo[0]= "test1";
    foo[1]= "test2";
    foo[2]= "test3";

    $(document).ready(function(){

         $.each(foo,function(){
            var temp = this;
            $('.message').animate({'opacity': 0}, 2000, function () {
            $(this).text(temp);
           }).animate({'opacity': 1}, 2000);
    }); 


    });

Fiddle

Answer 2

首先，将语言结构array包装在jQuery对象中，以便获取jQuery对象的方法：

$(foo)

然后在新的jQuery .each上使用array：

$(foo).each(function(

确保您的功能正在传递index和value参数：

$(foo).each(function( i, v ){});

然后做你的动画：

$( foo ).each(function( i, v ){
    $('.message')
        .animate({
            'opacity': 0
            },
            2000,
            function(){
                $(this).text(v);
            }
        )
        .animate({
            'opacity': 1
            },
            2000
        );
});

注意我使用v作为文本值。

警告，.text()和.html()做不同的事情。人们通常需要.html()，除非他们有使用.text()的特定原因。如果您遇到任何问题，请记住这一点。

Answer 3

Working Demo

var foo = ["test1", "test2", "test3"]; //add them all to array at same time

$(document).ready( function() {

    $(".ansy").click( function() {

        $.each(foo, function(index, value) {

            $('.message').animate({'opacity': 0}, 2000, function () {

                $(this).text( value );

            }).animate({'opacity': 1}, 2000);
        });
    }); 
});

有关其用法的详细信息，请参阅jQuery's $.each()上的文档。

将数组转换为jquery函数

3 个答案: