Question

我有一个代码：

        $("#button").click(function () {
            for (var i = 0; i < 4; i++) {
                setTimeout(function () {
                    $(".rows:eq("+i+")").css("background-color", "blue");
                },500);
            }
        });

由于某种原因，只有第五个元素获得背景颜色灰色。有什么问题？

Answer 1

它与i变量的范围有关。它绑定到for循环，而不是setTimeout调用的函数。基本上，当调用延迟函数时，i已经递增到4.为了绑定当前循环值i，调用另一个函数。 i放在函数堆栈上，因此保留了值。

这取决于你正在寻找什么样的行为，但如果你想立刻改变所有元素的CSS，那么@ Josh的评论是最好的。

$("#button").click(function () {
   setTimeout(function (){
     for (var i = 0; i < 4; i++) {
       $(".rows:eq("+i+")").css("background-color", "blue");
     }
   ,500);
});

否则尝试：

bindItoFunc = function (i) {
  return function (){
    $(".rows:eq("+i+")").css("background-color", "blue");
  };
}
$("#button").click(function () {
  for (var i = 0; i < 4; i++) {
     setTimeout(bindItoFunc(i),500);
   }
});

也许更优雅的解决方案是将i绑定为函数的this值。

bindItoFunc = function () {
  $(".rows:eq("+this+")").css("background-color", "blue");
}
$("#button").click(function () {
  for (var i = 0; i < 4; i++) {
     setTimeout(bindItoFunc.bind(i),500);
   }
});

提问者表示背景应该按顺序改变。在这种情况下，请根据i更改waitMs。

bindItoFunc = function () {
  $(".rows:eq("+this+")").css("background-color", "blue");
}
$("#button").click(function () {
  for (var i = 0; i < 4; i++) {
     setTimeout(bindItoFunc.bind(i),500+(100*i));
   }
});

Answer 2

尝试使用.delay()，.queue()，在最初将click设置为{后，以递增.index() .row .eq()为event.data递归调用0处理程序{1}}：// `0` : `event.data` $("#button").click(0, function re(event) { var i = typeof event.data === "number" ? event.data : event; $(".row").eq(i).delay(500).queue(function() { $(this).css("background-color", "blue"); if ($(this).index(".row") < 3) { re(i + 1) } }) })

＆＃13;

.row {
  color:orange;
  width:36px;
  padding:8px;
  font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="button">click</button>
<span class="row">0</span>
<span class="row">1</span>
<span class="row">2</span>
<span class="row">3</span>
<span class="row">4</span>

＆＃13;

[
   {      
      "buy": "Buy",
      "type": "list",
      "total": 0,
      "product": [
         {
            "id": "12345",
            "title": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
            "description": "Lorem ipsum dolor sit amet, consectetuer...",
            "price": "9,95",
            "modelo": [
               {                 
                  "stock": "Y",
                  "color": "red"
               },
               {                  
                  "stock": "Y",
                  "color": "blue"
               }
            ],
            "Valor": 4.571429,
            "Comments": 7
         },
         {
            "id": "78945",
            "title": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.",
            "description": "Lorem ipsum dolor sit amet, consectetuer...",
            "price": "7,95",
            "modelo": [
               {
                  "stock": "Y",
                  "color": "green"
               },
               {
                  "stock": "Y",
                  "color": "red"
               }
            ],
            "Valor": 7.345256,
            "Comments": 12
         }
         
      ]
   }
]

＆＃13;

eq :(）不能正常工作

2 个答案: