Question

我不是编码员，还在学习..

具有mysql查询列出的div个数。我需要一个javascript代码，可以根据点击的按钮显示class="qform" div。

如果点击button-1，则在同一qform（div）

中显示课程id="tour-1"

我可以让第一个div工作，但是我无法为每个可能数量的div输出复制代码。

我的问题有解决方案吗？

<script>
$(document).ready( function(){
    $("#button-1").click(function () {
    $(".qform").slideToggle("fast");
    $("#book-1.book" ).toggleClass( "book-off" );
}); });
</script>

<style>
    .qform {display:none;}
</style>

<div id="tour-1" class="tour">
    some text
    <div class="qform">Full name, email x2, tour name 1</div>
    <div id="book-1" class="book"><a id="button-1" href="JavaScript:void()">book now</a></div>
    some text
</div>
<div id="tour-2" class="tour">
    some text
    <div class="qform">Full name, email x2,tour name 2</div>
    <div id="book-2" class="book"><a id="button-2" href="JavaScript:void()">book now</a></div>
    some text
</div>
<div id="tour-3" class="tour">
some text
    <div class="qform">Full name, email x2, tour name 3</div>
    <div id="book-3" class="book"><a id="button-3" href="JavaScript:void()">book now</a></div>
    some text
</div>
<div id="tour-4" class="tour">
some text
    <div class="qform">Full name, email x2, tour name 4</div>
    <div id="book-4" class="book"><a id="button-4" href="JavaScript:void()">book now</a></div>
    some text
</div>

Answer 1

您可以使用.parent()向上走DOM，然后在相应的元素上调用函数：

$(document).ready( function(){
        $("a").click(function () {
            $(this).parent().parent().find(".qform").slideToggle("fast");
            $(this).parent().parent().find(".book" ).toggleClass( "book-off" );
    }); 
});

jsFiddle：http://jsfiddle.net/fastfieros/3EcDn/

Answer 2

看看：http://jsfiddle.net/stackolee/VpgfK/2/

如果你给锚标签一个类会更容易，因为这只有在tour div中没有任何额外的锚时才有效。

此外，退出<a href="Javascript:void()">内容。从jquery click函数返回'false'具有相同的效果。

jQuery不同的div ids显示/隐藏

2 个答案: