jQuery不同的div ID显示/隐藏

Question

I am no coder, still learning..

Have number of div s listed by mysql query. I am in need of a javascript code that can show the class="qform" div depending on which button is clicked.

if button-1 is clicked, then show the class qform piece in the same div ( id="tour-1" )

I could get the first div working, but there is no way I can duplicate the code for every possible number of div outputs.

is there a solution to my problem?

<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

You can use .parent() to walk up the DOM and then call functions on the respective elements:

$(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

Take a look at: http://jsfiddle.net/stackolee/VpgfK/2/

It would be easier if you gave the anchor tags a class, as this will only work if there aren't any additional anchors in the tour div.

Also, retire the <a href="Javascript:void()"> stuff. Returning 'false' from a jquery click function has the same effect.