当与attr函数一起使用时,javascript数组中的项输出undefined而不是实际值

时间:2015-05-22 17:34:16

标签: javascript jquery html css

我有一个具有不同图像名称的数组。想法是淡出图像,然后更改图像名称,最后更改图像,所以看起来每次图像淡出时都会显示不同的图像。但是每次我更改名称而不是输出值它输出单词" undefined" ...当我循环遍历数组和colsole.log值时,一切正常,但如果我尝试执行下面的代码," undefined& #34;值显示而不是数组值。

这是我的代码。

<div id="wrap">
        <div id="face">
            <img src="face.png">

        </div>
        <div id="bar">
            <div id="left">
                <img id="leftPic" src="cherry.png"/>

            </div>

            <div id="center">
                <img id="centerPic" src="seven.png"/>
            </div>

            <div id="right">
                <img id="rightPic" src="bar.png"/>
            </div>

            </div>

            <div style="clear:both;"></div>



            <button id="spinIt">Spin</button>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

        $("#spinIt").click(function(){

            var fruits = ["banana","bar","cherry", "grape", "lemon", "melon", "orange", "seven", "winner"];


            for (idx = 0; idx < fruits.length; idx++) { 
                $("#leftPic").fadeOut().fadeIn("slow",function(){
                    $("#leftPic").attr("src",fruits[idx]+".png");
                });
            }



        });
    </script>

4 个答案:

答案 0 :(得分:3)

您可以使用闭包来解决此问题:

var temp = function(fruit)
{
    $("#leftPic").fadeOut().fadeIn("slow",function(){
        $("#leftPic").attr("src",fruit+".png");
    });
};

for (idx = 0; idx < fruits.length; idx++) { 
    temp(fruits[idx]);
}

尝试类似的内容...在closures

上查看详情

答案 1 :(得分:0)

试试这个:

flatdat <- unlist(dat, recur=FALSE)
str(flatdat, list.len=3)
## List of 555
##  $ Book1.xlsx.Orig  :'data.frame':   128 obs. of  11 variables:
##   ..$ i   : num [1:128] 1 2 3 4 5 6 7 8 9 10 ...
##   ..$ x   : num [1:128] 1606527 7484 437881 1601729 1341668 ...
##   ..$ c1  : num [1:128] 1 1 1 1 1 1 1 1 1 1 ...
##   .. [list output truncated]
##  $ Book1.xlsx.Sheet2:'data.frame':   128 obs. of  11 variables:
##   ..$ i   : num [1:128] 1 2 3 4 5 6 7 8 9 10 ...
##   ..$ x   : num [1:128] 1606527 7484 437881 1601729 1341668 ...
##   ..$ c1  : num [1:128] 1 1 1 1 1 1 1 1 1 1 ...
##   .. [list output truncated]
##  $ Book1.xlsx.Sheet8:'data.frame':   128 obs. of  19 variables:
##   ..$ i    : num [1:128] 1 2 3 4 5 6 7 8 9 10 ...
##   ..$ x    : num [1:128] 1606527 7484 437881 1601729 1341668 ...
##   ..$ c1   : num [1:128] 1 1 1 1 1 1 1 1 1 1 ...
##   .. [list output truncated]
##   [list output truncated]

答案 2 :(得分:0)

尝试这样的事情:

   $("#spinIt").click(function () {

       var fruits = ["banana", "bar", "cherry", "grape", "lemon", "melon", "orange", "seven", "winner"];
       var idx = 0;

       function switchImage() {
           $("#leftPic").fadeOut().fadeIn("slow", function () {
               $("#leftPic").attr("src", fruits[idx] + ".png");
               idx++;
               if (idx < fruites.length) {
                   switchImage();
               }

           });
       }
       switchImage();

   });

答案 3 :(得分:0)

我喜欢这种使用for循环的方法,如果值未定义则不会继续

$("#spinIt").click(function () {
    var fruits = ["banana", "bar", "cherry", "grape", "lemon", "melon", "orange", "seven", "winner"], fruit;
    for (var i = 0; fruit = fruits[i]; i++) {
        $("#leftPic").fadeOut().fadeIn("slow", function () {
            $("#leftPic").attr("src", fruit + ".png");
        });
    }
});