jQuery不同的div ids显示/隐藏

Question

我不是程序员，还在学习。

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

如果单击button-1，则在相同的div (id="tour-1")中显示类qform段。

我可以让第一个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

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

如果您给锚标记一个类，这会更容易一些，因为只有在巡线div中没有任何额外的锚点时，这种方法才能工作。

同时，退休的<a href="Javascript:void()">的东西。从jquery单击函数返回'false‘的效果也是一样的。

Answer 2

您可以使用.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/