2

ニュースページの単純な 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>

Jクエリコード

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

申し訳ありませんが、もう少し最適化されたコードを実行すると、いくつかの問題を回避できます。これがあなたができたと思うことです。気に入っていただければ幸いです。これがあなたが望むように機能することを確認するために、フィドル（ここ）を作成しました。

<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

単純に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

少し最適化しない理由がわかりませんが、これが jsFiddle の結果です。

私が行ったことを正確に説明するために、jQuery css 宣言を取り除き、通常の css を使用しました。ID はすべて同じ種類の情報を共有しているため、すべての ID をクラスに変更しました。cursor: pointerまた、mouseover イベントは、すべてのブラウザーでとにかく mouseover でのみ機能するため、完全に不要なはずです。配列を 1 行に配置するのは単なる好みであり、必要に応じて、以前と同じように個別に初期化できます。解決策を気に入っていただければ幸いです。

于 2012-08-03T18:12:55.257 に答える
-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 に答える