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循环函数仅适用于最后一个元素

回答

相关问题