遞增的JavaScript變量不傳遞作爲參數

Question

<script type="text/javascript"> 
$(document).ready(function() { 



    var $item = $('div.imgItem'), //Cache your DOM selector 
     visible = 1, //Set the number of items that will be visible 
     index = 0, //Starting index 
     endIndex = ($item.length/visible) - 1, //End index 
     imgIndex = 1; 

    $('div#imageItem' + imgIndex).click(function(){ 
     if (index == 0 || index == (endIndex-1)) 
     { 
      var animatePX = imgWidth * .85 + 2; 
     } 
     else 
     { 
      var animatePX = imgWidth * .9 + 2; 
     } 

     if(index < endIndex){ 
      index++; 
      imgIndex++; 
      //alert (imgIndex); 
      $item.animate({'left':'-='+animatePX}); 
     } 
    }); 

}); 

我試圖創建幻燈片..我的問題是，可變imgIndex是在函數內部遞增，但是第二次調用該函數時，仍imgIndex的值是0 .. 有人可以幫助我在這個.. 我想增加的值作爲每次參數傳遞..

@ jfriend00這裏是我的html

<div class="imgItem" id="imgItem0"> 
</div> 
<div class="imgItem" id="imgItem1"> 
</div> 
<div class="imgItem" id="imgItem2"> 
</div> 
<div class="imgItem" id="imgItem3"> 
</div> 
<div class="imgItem" id="imgItem4"> 
</div>       

的圖像將每個DIV中加載..因爲我創建一個滑塊，我要點擊下一個圖像滑動這..這就是爲什麼我使用不同的ID對股利..

現在可以你告訴我，我應該如何改變這一行

$('div#imageItem' + imgIndex).click(function(){ 

Answer 1

的代碼行：

$('div#imageItem' + imgIndex).click(function(){ 

似乎是代碼的唯一線路正在使用imgIndex，所以它只會是它只運行一次一旦無線執行th的初始值爲0爲imgIndex。

如果您希望執行多次，那麼您需要在.click()處理程序中再次執行它，或創建一個for循環以多次執行多次值，或者需要設置其他類型您的初始事件處理程序適用於許多對象。

我們必須查看您的HTML並瞭解更多關於您想要完成哪些路徑的信息。

---

如果你想點擊的多個對象處理程序，那麼它可能最好放在一個共同的類名的他們，你可以設置事件處理程序是這樣的：

$('.imageItemCommon').click(function(){{/* code here */}); 

或者，如果這些是動態創建的元素，然後使用委派事件處理：

$(static parent selector).on('.iamgeItemCommon', 'click', function() {/* code here */}); 

---

PS沒有理由使用'div#imageItem0'而不是'#imageItem0'作爲選擇器。添加'div'部分只會減慢選擇器引擎的速度，因爲無論如何，ids在文檔中都是唯一的，所以您不應該將其作爲過濾器的一部分。

---

OK，現在你已經顯示的實際HTML，我建議你使用這種形式的事件處理程序，因爲這會爲所有的幻燈片工作（不需要一個id）：

// advance to next slide on click 
$(".imgItem").click(function() { 
    // use $(this) to refer to the currently clicked on slide 

}); 

---

而且，這裏是我想的是更簡單的方法做這樣的動畫：

var imgsNum = $(".imgItem").length 
var imgWidth = 200; 

$(".slideHolder").click(function() { 
    var holder = $(this); 
    var slideNum = -parseInt(holder.css("left"), 10)/imgWidth; 
    if ((slideNum + 1) < imgsNum) { 
     holder.animate({left: "-=" + imgWidth + "px"}, 1000); 
    } else { 
     holder.animate({left: "0"}, 1000); 
    } 
}); 

演示使用HTML和CSS的位置：http://jsfiddle.net/jfriend00/AZ7NY/

Answer 2

您的選擇：

$('div#imageItem' + imgIndex) 

只創建一次，當imgIndex=1。您需要創建更多的東西一般：

$('div[id^=imageItem]').click(function(){ 
    if ('imageItem'+imgIndex === this.id) { 
     if (index == 0 || index == (endIndex-1)) 
     { 
      var animatePX = imgWidth * .85 + 2; 
     } 
     else 
     { 
      var animatePX = imgWidth * .9 + 2; 
     } 

     if(index < endIndex){ 
      index++; 
      imgIndex++; 
      //alert (imgIndex); 
      $item.animate({'left':'-='+animatePX}); 
     } 
    } 
});