複数の要素のビヘイビアの個別表示/非表示を個別に

jQueryを使用して複数の要素を個別に表示/非表示する方法については、以前の質問を読んだことがありますが、私の場合は複数の要素のビヘイビアの個別表示/非表示を個別に

ページの「Showもっと」とのリンク
「ショー詳細を」ポスト抜粋を示すのデフォルトの動作を持つことになり、複数のブログの記事
各ブログの記事を持っています。ここでは
の内訳です1つの投稿のリンクをクリックすると、投稿の抜粋を非表示にして、フルポストのコンテンツが下部に「Show Less」というリンクが表示されるようにする必要があります。カスタムIDは間違った場所に置いたのでしょうか？）
1つのポストの「Show Less」リンクをクリックすると、ポスト・コンテンツが非表示になり、ポスト・エキスプレットが下部に「Show More」リンクと共に表示されます（再度、シングル・ポスト・インスタンスでのみ発生する必要があります。以下のコードから、実際の結果は次のことをやって終わる：
- 、予想通り、完全なコンテンツのためのポストの抜粋を入れ替え、同時にすべての記事）
問題に影響を与えます「詳細を表示」リンクがクリックされたとき
「表示しない」リンクが表示されているときに、抜粋のフルコンテンツを入れ替えませんクリックした

何か考えているのですか？私はjQueryでうまくいきません。私は既存のコード例でハックしたときにコードをよく学ぶ傾向があるので、予想される動作の代わりにこの動作を引き起こす原因を理解するためにはまだ苦労しています。

ポストインデックスの実際のHTMLは、それをインクルードすると意味をなさないCMSテンプレート固有のコードが多く使用されるため、生成されるコンテンツの外観を最低限に置き換えています。私はjQueryとHTML私は以下の私のテストのためにセットアップをしました...

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#full-3434').hide(); 
     $('.show-more').click(function() { 
      var id = $(this).attr('id'); 
     $('#excerpt-' + id).hide(); 
     $('#full-' + id).show(); 
    }); 
     $('.show-less').click(function() { 
      var id = $(this).attr('id'); 
     $('#full-' + id).hide(); 
     $('#excerpt-' + id).show(); 
    }); 
    }); 
    </script> 

<div class="entry-body"> 
    <div class="excerpt" id="excerpt-3434"> 
     <p>Post Excerpt Here. This will disappear when the "Show More" 
     link is clicked and the Full Post Content will display instead.</p> 
     <p><a href="#" class="show-more" id="3434">Show More</a></p> 
    </div> 

    <div class="full" id="full-3434"> 
     <p>Full Post Content Here. This will be hidden by default. When 
     the "Show Less" link is clicked, the Full Post Content will 
     disappear and Post Excerpt will reappear.</p> 

     <p><a href="#" class="show-less" id="3434">Show Less</a></p> 
    </div> 
</div> 

</body> 
</html>

は、任意およびすべてのヘルプ感謝を追加しました！：D

出典

2011-12-03 Brianna

あなたのコードはコピーされ貼り付けられています。[jsFiddle]（http://jsfiddle.net/czarchaic/aHC6b/） – czarchaic

私のテストではうまくいきましたが、複数のインスタンスが存在し、 ID、それは停止します。私は下の実用的な解決策を与えられましたが、私のためにテストする時間を取っていただきありがとうございます！ :) – Brianna

HTMLの基本的なことの1つは、同じIDを持つ要素が1つだけあることです。

あなたの問題の解決策は、このHTMLを持つことがあります。

<div id="3434" class="entry-body"> 
<div class="excerpt"> 
    <p>Post Excerpt Here. This will disappear when the "Show More" 
    link is clicked and the Full Post Content will display instead.</p> 
    <p><a href="#" class="show-more">Show More</a></p> 
</div> 

<div class="full"> 
    <p>Full Post Content Here. This will be hidden by default. When 
    the "Show Less" link is clicked, the Full Post Content will 
    disappear and Post Excerpt will reappear.</p> 

    <p><a href="#" class="show-less">Show Less</a></p> 
</div> 
</div>

と機能のこの体

$('#3434 .full').hide(); 
    $('.show-more').click(function() { 
     var id = $(this).closest('.entry-body').attr('id'); 
    $('#' + id + ' .excerpt').hide(); 
    $('#' + id + ' .full').show(); 
}); 
    $('.show-less').click(function() { 
     var id = $(this).closest('.entry-body').attr('id'); 
    $('#' + id + ' .full').hide(); 
    $('#' + id + ' .excerpt').show(); 
});

しかし、これはまだ不器用です。あなたは、CSSからこのスタイルでも、より多くの電力を取ることができます。

.entry-body .more .full, .entry-body .less .excerpt { display: block } 
.entry-body .more .excerpt, .entry-body .less .full { display: none }

あなたは機能のこの身体を持つことができます。

$('#3434').addClass('less'); 
    $('.show-more').click(function() { 
     var post = $(this).closest('.entry-body'); 
    post.removeClass('less'); 
    post.addClass('more'); 
}); 
    $('.show-less').click(function() { 
     var post = $(this).closest('.entry-body'); 
    post.removeClass('more'); 
    post.addClass('less'); 
});

これは単にクラスを交換することにより、すべての変更を行い、あなたは多くのことをやらせますcss内の投稿の2つの状態の間の変化は、単に「表示された」/「隠された」だけでなく変化します。

EDIT：

そして、あなたは$('.entry-body').addClass('less')で$('#3434').addClass('less')を交換場合は、一切の醜いIDを使用していない素敵な一般的な自己完結型のコードを持っているし、ページ上のポストの任意の数のために動作します。

出典

2011-12-03 22:42:35

私は少しこれを試してみる必要があります。時間をとっていただきありがとうございます、ハービー！ – Brianna

それは美しく働いた、ハービー！すべてのあなたの助けをありがとう。 :)私は、クリックしたときに.show-lessにいくつかの追加機能をスムーズに挿入することもできましたが、あなたの初期の助けなしにはできませんでした。 – Brianna

答えの一番下にあるEDITを参照してください。 –

複数の要素のビヘイビアの個別表示/非表示を個別に

答えて

関連する問題