避免重複動態化轉盤

Question

我用滑塊臨插件，我希望我的動態化jQuery代碼，讓我不必每一次新的代碼行添加添加幻燈片，我可以有一些幫助嗎？

在我寫的每一個「本期特價貨品」證去上鼠標懸停幻燈片的代碼，但它是一個有點重複。

$(".item-0").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 0); 
}); 
$(".item-1").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 1); 
}); 
$(".item-2").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 2); 
}); 
$(".item-3").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 3); 
}); 
$(".item-4").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 4); 
}); 
$(".item-5").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 5); 
}); 
$(".item-6").mouseover(function() { 
    $('#carousel').sliderPro('gotoSlide', 6); 
}); 

Answer 1

嘗試用for循環，也這是很好的做法，如果你使用它不止一次緩存DOM元素var $carousel = $('#carousel');：

var itemNumber = 6; //number of items 
var $carousel = $('#carousel'); 

for(var i = 0; i <= itemNumber; i++) 
{ 

    $(".item-" + i).mouseover(function() { 
     $carousel.sliderPro('gotoSlide', i); 
    }); 

}