1

XSl コードを使用して XML から読み取る FAQ ページがあります。質問と回答の div は、XML のレコード数だけ繰り返されます。

これは XSL コードです。

<xsl:for-each select ="TSPRoot/FAQS/FAQ">
<div id="flip">
<xsl:value-of select ="Question"/>
</div>
<div id="panel">
<xsl:value-of  select ="Answer" disable-output-escaping ="yes"/>
</div>
</xsl:for-each >

頭の中には、次の JQuery コードがあります。

<script>
$(document).ready(function(){
    $("#flip").click(function(event){
        event.preventDefault();
        $("#panel").slideToggle("slow");
    });
});
</script>

slideToggle は最初の div でのみ機能し、その後は機能しません。

アイデアが思いつきません。

4

1 に答える 1

4

HTML 101: ID は単数形です。同じ ID を持つアイテムを複数持つことはできません!

クラスを使おう！next() を使用する

HTML:

<div class="question">XXX</div>
<div class="answer">YYY</div>
<div class="question">XXX</div>
<div class="answer">YYY</div>
<div class="question">XXX</div>
<div class="answer">YYY</div>

JavaScript:

$(document).on("click",".question", function(){
     $(this).next().toggle();   
});

例

http://jsfiddle.net/8xvTM/1/

于 2013-02-25T14:48:39.850 に答える