3

ページ上のオブジェクトを表すサイド ナビゲーション バーにリストがあります。オブジェクトのヘッダーは、リストのタイトルと一致します。これを下の図に示します。

ここに画像の説明を入力

jQuery を使用してこれらのオブジェクトの表示と切り替えを試みているため、ユーザーが赤いリスト項目 (赤いページ オブジェクトと同じヘッダー タイトル) をクリックすると、対応するページ オブジェクトの表示と非表示が切り替えられます。

ここに私の単純化されたコードがあります：

// The left navigation list
<ul>
    <li>Charity Challenge Golf Outing</li>
    <li>Spring 2014 Membership Renewal</li>
    <li>EMEA Product Launch</li>
    <li>Platinum Customer Retention Spring Offer</li>
    <li>Key Account Upsell 2014</li>
</ul>

// A couple of page objects
<div class="single-activity">
    <h2>Charity Challenge Golf Outing</h2>

    [...]
</div>

<div class="single-activity">
    <h2>Spring 2014 Membership Renewal</h2>

    [...]
</div>


<div class="single-activity">
    <h2EMEA Product Launch</h2>

    [...]
</div>

// The jQuery
$(".left-panel li").click(function() {
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity").slideToggle();
});

質問:<h2>機能しない理由はわかっていますが、タイトルに基づいてオブジェクトを「見つける」方法が少しわかりません。コードはすべてのオブジェクトをスライドさせて切り替えます (すべてのオブジェクトに.single-activityクラスがありますが、クリックしたオブジェクトのみを非表示にしたいので、何かアイデアはありますか?

4

2 に答える 2

5

filter()、または:containsセレクターを使用できます。

$(".left-panel li").click(function() {
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity:contains("+$(this).text()+")").slideToggle();
});

またはでfilter()：

$(".left-panel li").click(function() {
    var txt = $.trim( $(this).text() );
    $(this).toggleClass("selected");
    $("#page-content").find(".single-activity").filter(function() {
        return $.trim( $(this).text() ) == txt;
    }).slideToggle();
});
于 2013-04-02T16:17:00.293 に答える
1 
$(".left-panel li").click(function() {
    var $this = $(this);
    $this.toggleClass("selected");
    $("#page-content").find(".single-activity:contains(" + $this.html() + ")").slideToggle();
});
于 2013-04-02T16:17:56.447 に答える