搜尋

首頁  >  問答  >  主體

javascript setInterval()函數

用setInterval()函式動態為li加入css

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
  </ul>
var i = -1;
setInterval(function(){
  i++;.
  console.log(i);
  (i > 3) ? i = -1 : changeClass(i);

}, 1000);

function changeClass(j) {
  $('li').eq(j).addClass('cur').siblings().removeClass('cur');
}

發現i的變化是0->1->2->3->4->0->1->2->3->4這樣,也就意味著下標為3的li添加css 後, 中間會間隔1s, 才會繼續動態切換, 因為沒有下標為4的li, 這是什麼情況造成的

为情所困为情所困2829 天前524

全部回覆(5)我來回復

  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:14:53

    因為 (i > 3) ? i = -1 : changeClass(i); 三元運算,

    當i=4的時候 (i > 3) ? 意思是 4大於3嗎? ,4一定大於3就執行i = -1,

    就不會執行changeClass(i)這個函數,所以沒有下標為4的li

    回覆
    0
  • 某草草

    某草草2017-05-19 10:14:53

    雷雷

    回覆
    0
  • 習慣沉默

    習慣沉默2017-05-19 10:14:53

    0 - 3就已經4個了, 你寫的(i > 3)才會變成-1, 也就是說要運行五次才會變成-1;
    如果你想運行4次就變成- 1應該改成(i >= 3)

    回覆
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:14:53

    雷雷

    回覆
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:14:53

    第四個永遠掛不上 所以建議把i>3 改為i>4或i>=3

    回覆
    0
  • 取消回覆