2

メニューがあります。各メニュー項目にはクラス名があります。メニュー項目をクリックすると、JQueryを使用してID名が一致するdivを検索しています。問題は、検索が厳密ではないことです。何かがelo-1のようなクラス名を持ち、div IDの名前がelo-1とelo-11である場合、elo-1だけを取得する方法（これを行う方法）はありません。

完全に一致させたいのですが。elo-1をクリックして、elo-1のみを取得し、elo-1、elo-11、elo-12などは取得しません。誰かアイデアはありますか？

これが私が使用しているコードです：

        $(document).ready(function() {

    var myLayoutId = $(this).attr("layoutId");


    $("#start_page").show().siblings().hide();
    $("#navBar").hide();
    $("#refs").hide();

    $("li").click(function() {
        var thisID = $(this).attr("class");
        $("#mainBdy div:#"+thisID).show().siblings().hide();
        $('#mainBdy div[id^="'+thisID+'"]').show();


        $("#mainBdy div:#"+thisID).css("width","30%");
        $("#mainBdy div:#"+thisID).css("margin-left","-80px");
        $("#mainBdy div:#"+thisID).css("margin-top","-50px");
        $("#mainBdy div:#"+thisID).css("float","left");


    });


    $("#start_page_accept").click(function() {
        $("#navBar").show();
        $("#refs").show();
        $("#start_page").hide().next().show();
    });

    $("#menu").collapsible({
        effect: "slide",             // The effect to use when expanding and collapsing the menu. 
        initialCollapse: true       // When true, collapses the menu when the page loads.
    });

});
4

2 に答える 2

7

これを置き換えます：

    $("#mainBdy div:#"+thisID).show().siblings().hide();
    $('#mainBdy div[id^="'+thisID+'"]').show();


    $("#mainBdy div:#"+thisID).css("width","30%");
    $("#mainBdy div:#"+thisID).css("margin-left","-80px");
    $("#mainBdy div:#"+thisID).css("margin-top","-50px");
    $("#mainBdy div:#"+thisID).css("float","left");

これとともに：

$('#' + thisID).show().css({
    'width': '30%',
    'margin-left': '-80px',
    'margin-top': '-50px',
    'float': 'left'
}).siblings().hide();

いくつかのメモ:

  • jQuery での連鎖は非常に強力で、同じ要素で複数のことを行う場合に DOM の再クエリを回避できます。同様に、次のような jQuery 検索の結果を保存することもできvar $div = $('#' + thisID);ます。どちらの場合も、同じセレクターを何度も実行したくないだけです。
  • ID はドキュメント内で一意であると想定されているため、ドキュメント内に「elo-1」という ID を持つ要素が 1 つだけあると想定しています。それが本当なら、そうあるべきですが、複雑なセレクターを実行することは、'#mainBdy div[id^="'+thisID+'"]'jQueryがネイティブを使用できなくなるだけgetElementByIdであり、これは何倍も効果的です（クリーナーは言うまでもありません）。
  • ご覧のとおりcss、オブジェクトを受け入れるため、複数回呼び出す必要はありません。個人的には、メニュー項目にクラスを追加して、スタイルシートでスタイルを処理するだけです。保守性の観点からは、はるかに簡単です。
于 2012-11-26T15:42:26.573 に答える
6

セレクターを変更して、start-with マッチングを回避します。

$('#mainBdy div[id^="'+thisID+'"]').show();

これは、あなたが望むものではない、あなたの値で始まるものすべてに一致します:

$('#mainBdy div[id="'+thisID+'"]').show();

これは、id 属性が値と等しいアイテムのみに一致します。

追加の提案

個々のリスト項目にバインドしていることにも注意してください。

$("li").click();

ページに配置されるすべての新しいリスト アイテムに対してイベント ハンドラーを追加しているため、これはアプリに対するタスクになる可能性があります。イベント委任ははるかに優れたアプローチであり、1 つのイベント ハンドラーを祖先要素に追加し、イベント バブリングを使用してネストされたアイテムのイベントに応答します。

<ul id="list">
    <li class="edo-1">Edoine Mashlup</li>
</ul>

これがマークアップであると仮定します (適切な測定のために、別の 100 個のリスト アイテムをトスします)。次は、イベント委任命令です。

$("#list").on("click", "li", function () {
    $("#" + this.className).show().css({
        width:      '30%',
        marginLeft: '-80px',
        marginTop:  '-50px',
        float:      'left'
    })
    .siblings().hide();
});

要素上または要素内でクリック イベントが発生するたびに#list、ターゲット (クリックを受け取った要素) がセレクターと一致するかどうかを評価しますli。存在する場合は、関数をトリガーします。そうでない場合は、それを無視して DOM をバブルアップさせます。

于 2012-11-26T15:42:20.917 に答える