2012-02-19 5 views
4

私は、各エントリの拡張されたコンテンツの可視性をトグルする複数エントリページ上のJquery機能を表示/非表示にしています。ただし、「more」リンクをクリックすると、のすべてのエントリを同時に拡張することができます。 Jquery関数を調整して各項目を個別にターゲットにしたいと考えています。EEの{entry_id}パラメータを使用して、Jquery関数の個々のエントリをターゲットにしますか?

これを達成する最良の方法は、clickイベントの一環としてEEのユニークな{entry_id}パラメータを対象とすることですが、まだEEテンプレートタグを使用する構文/実装を理解するのに苦労しています。 Jqueryと連携する私は非常に Jqueryの初心者です。誰も助言することはできますか?次のように

jQueryの場所にあります。これは、テキストリンクのクリックを探し

function showMore(){ 

$('.more').hide(); 

$('.morelink a').click(function(e) { 
$('.more').slideToggle('slow'); 
$('.morelink a').toggleClass("less"); 
$(this).text($(this).text() == 'Less' ? 'More' : 'Less'); 
e.preventDefault(); 
}); 
} 

$(document).ready(function(){ 
showMore(); 
}); 

(.morelink a)と(.more)ものテキストをtogglglingながらリンクは非表示のdiv言っslidetoggles状態に応じて、「More」から「Less」に変更できます。この関数は、ページの読み込みに組み込まれた別のテンプレートにあります。

問題の削ぎ落としたHTMLは単純です:私は認識{たentry_id}得るが、無駄にすることを考えることができるすべての順列および配置を試してみた

{exp:channel:entries channel=“x” limit"x"} 

<div class=“content”>content</div> 
<div class="more">more content</div> 
<div class="morelink"><a href="#">More</a></div> 

{/exp:channel:entries} 

。解析順序問題、構文問題、またはこの方法が間違っているかどうかは不明です。すべてのガイダンスは大いに感謝しています。

答えて

2

jQueryをEEの{entry_id}に結びつける必要はありません。

ラップ各コンテンツブロック、それは次のようになりますので、:

{exp:channel:entries channel=“x” limit"x"} 
    <div class="content_block"> 
     <div class=“content”>content</div> 
     <div class="more">more content</div> 
     <div class="morelink"><a href="#">More</a></div> 
    </div> 
{/exp:channel:entries} 

次にこれにあなたのjQueryを変更します。

function showMore() { 
    $('.more').hide(); 

    $('.morelink a').click(function(e) { 
     var block = $(this).parents('.content_block'); 
     block.find('.more').slideToggle('slow'); 
     block.find('.morelink a').toggleClass("less"); 
     $(this).text($(this).text() == 'Less' ? 'More' : 'Less'); 
     e.preventDefault(); 
    }); 
} 

$(document).ready(function(){ 
    showMore(); 
}); 

さて、リンクがクリックされるたびに、それは内部要素のみを参照しますローカルのcontent_block DIV。

+0

パーフェクト。 htmlはすでに ".post"のセクションクラスに囲まれていたので、 ".content_block"の代わりに、再作成されたJquery関数に.postをドロップするだけでした。魅力的なように働いた。本当にありがとう! – Jmorriso

+0

問題はない、うれしい=) – mikos

関連する問題