HTML：jQuery：DOM操作

私は怠け者です。そこ！それは邪魔です。HTML：jQuery：DOM操作

私はHTMLでレンダリングしたい不定長の項目のリストを持っています。私は各アイテムの一部を見せて、それぞれのアイテムに「もっと見る」リンクをつけてアイテムの詳細を表示したいと思います。「もっと見る」リンクは同じ機能を実装しているので、同じクリックハンドラ機能を「表示するリンク」にバインドして、非表示のテキストを含むHTMLスパンを表示します。私のコードは次のようになります：

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
</head> 
<body> 
<p>List of stuff</p> 
<ul> 
    <li> One <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about One </span></li> 
    <li> Tow <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Two </span></li> 
    <li> Three <a href="#" class="showmore_link">show more</a> <span class="showmore" style="display:none"> More about Three </span></li> 
</ul> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $(".showmore_link").click(show_more_toggle); 
    }); 

    show_more_toggle=function(){ 
     $(".showmore").slideToggle(); 
    } 

</script> 
</body> 
</html>

「もっと見る」リンクをクリックすると、「showmore」クラスの3つのスパンがすべて表示されます。「show_more_toggle」クリックハンドラを調整して、同じリストアイテム内のスパンのみを開くようにするにはどうすればよいですか？

CONSTRAINT：他の理由でスパンまたはリスト要素に「id」属性を使用することはできません。

出典

2011-10-12 Jay Godse

別ソリューション：

$(document).ready(function() { 
    $(".showmore_link").click(function() { 
     $(this).parent().children(".showmore").slideToggle(); 
    }); 
});

http://jsfiddle.net/A7fM5/

出典

2011-10-12 13:51:43 alexl

"showmore_link"と親を共有するが、非公式の場合はより一般的なので、 "showmore_link"と親を共有するが、必ずしも兄弟であるとは限らないので、この解決策は私のためにはうまくいった。ありがとうございました。 –

TRY -

show_more_toggle=function(){ 
    $(this).siblings(".showmore").slideToggle(); 
}

デモ - http://jsfiddle.net/ipr101/9GB9u/

出典

2011-10-12 13:47:46 ipr101

$('a.showmore_link').click(function() { 
    $(this).next().show(); 
});

出典

2011-10-12 13:47:52 Blazemonger

または '$（この）.hide（）次の（）ショー（）;'あなたは今、役に立たないリンクを取り除きたい場合。同時に。 – Blazemonger

使用next() - それはあなたが要素にまたがる取得します。

出典

2011-10-12 13:49:18 Bizniztime

HTML：jQuery：DOM操作

答えて

関連する問題