2

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

代码

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

查询代码

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

5 回答 5

3

对不起，但你可以避免一些问题做一些更优化的代码。这就是我认为你可以做的。希望你喜欢！我创建了一个小提琴（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-03T18:10:57.893 回答
0

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

为了准确解释我做了什么，我摆脱了 jQuery css 声明，并使用了常规 css。我将所有 ID 更改为类，因为它们都共享相同类型的信息。此外，mouseover 事件应该是完全没有必要的，因为cursor: pointer在所有浏览器中都只适用于 mouseover。将数组放入一行只是偏好，如果您愿意，可以像以前一样单独初始化它。希望你喜欢这个解决方案！

于 2012-08-03T18:12:55.257 回答
0

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

于 2012-08-03T18:13:40.900 回答
0

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

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]);
        });
    }
});
于 2020-10-04T06:15:45.287 回答
-1

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

编辑：修复了错过的点击事件

于 2012-08-03T18:06:05.740 回答