javascript - 我需要 ($ ("#flip").click slideToggle ) 以相同的 ID 在同一页面上执行多次

Question

我有一个使用 XSl 代码从 XML 读取的常见问题页面，问题和答案的 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 起作用，然后就不起作用。

我想不出任何想法。

Answer 1

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/