CODEWITHSUNDEEP
jquerycss
thatuxguy
thatuxguy

Reputation: 2528

How to add a class, and get results once complete

How would i go about using jQuery to add a "selected" class to the LI's in this? Once all 6 questions have been selected, i would then need to go through the questions and get the selected answer. I have added the Question ID along with the answer ID to each answer which might make it easier to pick up and process later.

 <div id="1002" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li id="1002-a1">Answer 1</li>
        <li id="1002-a2">Answer 2</li>
        <li id="1002-a3">Answer 3</li>
    </ul>
   </div>
 </div>

This is how i would like it to look...

 <div id="1002" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li id="1002-a1" class="selected">Answer 1</li>
        <li id="1002-a2">Answer 2</li>
        <li id="1002-a3">Answer 3</li>
    </ul>
   </div>
 </div>

Many thanks in advance.

Upvotes: 0

Views: 86

Answers (3)

y2ok
y2ok

Reputation: 658

Here is live example which does work - http://jsfiddle.net/3fPaC/ .

Code - 

$(document).ready(function() {
    var count = 0;
    $("li").click(function() {
        if($(this).siblings().hasClass("selected")) {            
            $(this).siblings().removeClass("selected");
            count--;
            $("#result").text("");
        }
        $(this).addClass("selected");    
        var question = $(this).attr("question");
        $("#"+question).addClass("answered");       
        count++;
        if(count == 3) {
            $(".selected").each(function() {
                $("#result").append(" "+$(this).text());
            });
        }     
    });          
});​

Also, do not use just numbers as ID, since it can cause problems.

HTML code -

<div id="result"></div>
<div id="question1002" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li question="question1002" answer="a1">Answer 1111</li>
        <li question="question1002" answer="a2">Answer 2111</li>
        <li question="question1002" answer="a3">Answer 3111</li>
    </ul>
   </div>
 </div>

 <div id="question1003" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li question="question1003" answer="a1">Answer 1</li>
        <li question="question1003" answer="a2">Answer 2</li>
        <li question="question1003" answer="a3">Answer 3</li>
    </ul>
   </div>
 </div><div id="question1004" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li question="question1004" answer="a1">Answer 122</li>
        <li question="question1004" answer="a2">Answer 222</li>
        <li question="question1004" answer="a3">Answer 322</li>
    </ul>
   </div>
 </div>​

You can change the count == 3 to whatever you like. The 3 is the number of questions.

Upvotes: 0

Alnitak
Alnitak

Reputation: 339975

To toggle the <li> elements:

$('.answer li').on('click', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

To find the selected <li> elements:

var answers = $('.answer li.selected').map(function() {
    return this.id;
}).get();

Upvotes: 1

Anders Arpi
Anders Arpi

Reputation: 8417

I'd recommend that you use radio buttons in a form for this. That said, here's a fiddle with the answer I think you are looking for there are some good answers here. :-)

Upvotes: 0

Related Questions