ansaurus

Question

How can I pass an id to a function in jquery?

Answer 1

+6 A:

You don't need to pass in the ID. Just traverse from the div clicked to the answer you want. this refers to the source of the event, which will in this case be a div with class "question".

$("div.question").click(function() {
  $(this).next().fadeIn("slow");
});

Also, assuming your markup is accurate this can be simplified:

$("div > div.answer").hide();

to simply

$("div.answer").hide();

but I would actually do it with CSS:

div.answer { display: none; }

so no Javascript needs to be executed when the page loads. In my experience when using an async load of jQuery with the Google AJAX Libraries API like you are, the page will render and then your flashcard answers will visibly disappear. This tends to be undesirable. Just use CSS to hide them.

Also, jQuery is as of a day or two ago up to version 1.4.1.

cletus 2010-01-27 06:24:28

I believe that should be $(this).next().

Dave Ward 2010-01-27 06:27:48

@Dave: Er... fixed ages ago. :) You need to refresh more. :)

cletus 2010-01-27 06:33:59

@cletus: +1, when commented was wrong but it's fine now :)

CMS 2010-01-27 06:34:44

Answer 2

+3 A:

Since the two divs are siblings, you can use the next method to get the next div.answer element:

$("div > div.question").click(function() {
  $(this).next("div.answer").fadeIn("slow");
});

Check an example here.

CMS 2010-01-27 06:26:14

Answer 3

A:

When you are inside the event, you need to reference the this keyword, so that you are in the proper context. Otherwise, you are selecting globally, rather than specifically.

google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
    $("div.flashcard div.answer").hide();

    $("div.flashcard div.question").click(function() {
        $(this).next('div.answer').fadeIn("slow");
    });
});

Dominic Barnes 2010-01-27 06:27:39

Answer 4

A:

This should be code you are looking for. I tested and it is working.

<script type="text/javascript">
        google.load("jquery", "1.4.0");
        google.setOnLoadCallback(function() {
          $("div > div.answer").hide();

          $("div > div.question").click(function() {

             if($(this).siblings('.answer').css('display')  == 'none')
                $(this).siblings('.answer').fadeIn("slow");
             else
                $(this).siblings('.answer').fadeOut("slow");
          });
        }); 
</script>

poh 2010-01-27 06:43:19

ansaurus

tags:

views:

answers:

How can I pass an id to a function in jquery?

related questions