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 的项目！

使用类！使用下一个（）

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/