Using a button to show certain elements

CODE HERE: http://jsfiddle.net/B7Y43/

Hello fello programmers,

I have the following situation:

My PHP-script generates multiple DIV's, containing:

• A question (with a class that is either mainQuestion or subQuestionOf[questionID])
• A button
• A paragraph containing the answer

I am trying to achieve the following:

When the user clicks the button next to the question, the answer AND the subquestions should fadeIn. I have already managed to fadeIn the answer when the user clicks the button, using $(this).next('p').fadeIn("fast"); but since the subQuestions are rarely the next div, I think I need the use parameters.

So in pseudo-code:

<question id="1" subquestionOf=""><button>
<answer>
<question id="2" subquestionOf="1"><button>
<answer>
<question id="3" subquestionOf开发者_StackOverflow中文版="1"><button>
<answer>

if user clicks button {
show answer;
show questions where subquestionof=parent.id;
}

I have no idea how to use parameters, I tried getting the ID of the button's parent div with no luck:

$(function getID(event){
            var id = $(this).parent().attr("id");
            alert(id);
    });

Alert shows: "Undefined"

I tried (modifying your code in jsFiddle):

$("input.showAnswerButton").click(function() {
        $(this).next('p').fadeIn("fast"); //answer
        //subquestions
        $('.subQuestionOf'+$(this).parent().attr("id")).fadeIn("fast");
    });

and it's working...

Try using event.target from the event object to get the id of the clicked button.

Are you debugging using Firebug to check the values of $(this) and the result of .parent()?