JQuery循环函数只适用于最后一个元素

Question

我正在为新闻页面开发一个简单的JQuery函数。基本上，这个想法很简单。。。我有一个新闻文本div，然后我将为不同的新闻项目添加各种按钮。其思想是，当用户单击按钮时，div会加载数组中的适当新闻文本。似乎只在最后一个按钮上工作，所以我的循环出现了问题。我是新手，所以我有点不知所措！

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]);
        });
    };
});

Answer 1

很抱歉，但您可以在执行稍微优化的代码时避免一些问题。以下是我认为你本可以做的。希望你喜欢！我（在这里）制作了一把小提琴，以确保它能像你想要的那样工作。

<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'));
    });
});

Answer 2

我不明白你为什么不优化一点，我做到了，这就是jsFiddle的结果。

---

为了准确地解释我所做的，我去掉了jQuerycss声明，并使用了常规css。我将所有的ID都更改为类，因为它们共享相同类型的信息。此外，mouseover事件应该是完全不必要的，因为cursor: pointer在所有浏览器中都只能在mouseover上工作。将数组放入一行只是首选项，如果您愿意，可以像以前那样单独初始化它。希望你喜欢这个解决方案！

Answer 3

您可以简单地使用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/

Answer 4

这些工作示例完全正确。但我还是想纠正你的代码。

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

Answer 5

以下是（a？）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]);
        });
    }
});

编辑：修复点击失误事件