JQuery循環函數僅適用於最後一個元素

我正在爲新聞頁面設計一個簡單的JQuery函數。基本上這個想法很簡單...我有一個新聞文本div，然後我會爲不同的新聞項目添加各種按鈕。這個想法是，當用戶點擊一個按鈕時，div會在數組中加載正確的新聞文本。似乎只能在最後一個按鈕上工作，所以我的循環出了問題。我是新手，所以我有點難住！JQuery循環函數僅適用於最後一個元素

HTML代碼

<div id="textbtn0">Btn1</div> 
<div id="textbtn1">Btn2</div> 
<div id="textbtn2">Btn3</div> 
<div id="textbox">This is text</div>

jQuery代碼

jQuery(document).ready(function() { 
    var newsItems=new Array(); 
    newsItems[0]="News1"; 
    newsItems[1]="News2"; 
    newsItems[2]="News3"; 
    for(a=0;a<newsItems.length;a++){ 
     var num=a; 
     jQuery("#textbtn"+num).mouseover(function() { 
      $("#textbtn"+num).css('cursor', 'pointer'); 
     }); 

     $("#textbtn"+num).click(function() 
     { 
      $("#textbox").html(newsItems[num]); 
     }); 
    }; 
});

來源

2012-08-03 Adam

可能重複http://stackoverflow.com/questions/ 1331769/access-external-variable-in-loop-from-javascript-closure）並非完全重複，但此問題的解決方案是相同的。 – 2012-08-03 18:02:15

不要在循環中聲明函數。這是一個經常出現在SO上的錯誤。 – 2012-08-03 18:02:38

我知道這不會修復任何東西，但。 1）使用「var a」，2）第二次使用$而不是jQuery，3）不要在結束循環中使用分號「}; – ajax333221 2012-08-03 18:07:04

這裏做的（一個？）jQuery的方法：

jQuery(document).ready(function() { 
    var newsItems=new Array(); 
    newsItems[0]="News1"; 
    newsItems[1]="News2"; 
    newsItems[2]="News3"; 
    for(a=0;a<newsItems.length;a++){ 
     jQuery("#textbtn"+a).mouseover({num:a},function(e) { 
      $("#textbtn"+e.data.num).css('cursor', 'pointer'); 
     }); 
     $("#textbtn"+a).click({num:a},function(e){ 
      $("#textbox").html(newsItems[e.data.num]); 
     }); 
    } 
});

編輯：固定錯過點擊事件

來源

2012-08-03 18:06:05

對不起，但你可以避免一些問題做了一些更優化的代碼。以下是我認爲你可以做的事情。希望你喜歡！我創建了一個小提琴（here），以確保它能像你想要的那樣工作。

<div class="textHover" alt="News 1">Btn1</div> 
<div class="textHover" alt="News 2">Btn2</div> 
<div class="textHover" alt="News 3">Btn3</div> 
<div id="textbox" >This is text</div>

jQuery(document).ready(function() { 
    jQuery(".textHover").css('cursor', 'pointer'); 
    jQuery(".textHover").click(function() 
    { 
     $("#textbox").html($(this).attr('alt')); 
    }); 
});

來源

2012-08-03 18:10:57

我不明白爲什麼你不會優化一點點，我做到了，this is the jsFiddle result。

準確解釋我做什麼，我擺脫了jQuery的CSS聲明，並定期使用CSS。我將所有ID都更改爲類，因爲它們都共享相同類型的信息。此外，鼠標懸停事件應該是完全沒有必要的，因爲cursor: pointer只適用於所有瀏覽器中的鼠標懸停。把數組放在一行只是偏好，如果你願意，你可以像你一樣單獨初始化它。希望你喜歡解決方案！

來源

2012-08-03 18:12:55 Vap0r

我不明白爲什麼這是downvoted。如果我做錯了什麼，請告訴我，我想知道，所以我不會繼續這樣做。謝謝。 – Vap0r 2012-08-03 18:21:04

，你可以簡單地使用jQuery.each

jQuery(document).ready(function() { 
    var newsItems=new Array(); 
    newsItems[0]="News1"; 
    newsItems[1]="News2"; 
    newsItems[2]="News3"; 
    $.each(newsItems, function(i, l){ 
     $("#textbtn"+i).mouseover(function() { 
      $("#textbtn"+i).css('cursor', 'pointer'); 
     }); 
     $("#textbtn"+i).click(function(){ 
      $("#textbox").html(newsItems[i]); 
     }); 
    }); 
});

這裏的工作示例=>http://jsfiddle.net/abdullahdiaa/aawcn/

[從Javascript封閉外變量訪問環路（中

來源

2012-08-03 18:13:40 AbdullahDiaa

JQuery循環函數僅適用於最後一個元素

回答

相關問題