CODEWITHSUNDEEP
javascriptjqueryhtml
Willow
Willow

Reputation: 153

An efficient toggle class function?

Right now, I have an html with several question items, and I need to create just one function (in this case, itemChoose) to call on all of them on click. The problem that is happening right now is, when I click one of the custom radio buttons on any item, the radio button that's selected just jumps from one question item to the next, so it leaves all of the other item questions unanswered. I need a function that limits the toggling to one question item, so each one of them has an answer.

This is the format of one item:

    <div id="marksymbol1" style="float:left; margin-right:20px; margin-top:20px;"></div>
    <div  style="margin-left:70px;">
    <p>1. Which of the following sentences describes the turtle in the story?</p>
    <div id="item1A" class="marginTop item">
        <div class="unselected"></div>
        <div class="choicesTxt">
            She loves to fly in the sky.
        </div>
    </div>
    <div id="item1B" class="marginTop item">
        <div class="unselected"></div>
        <div class="choicesTxt">
            She loves to talk and chatter.
        </div>
    </div>
    <div id="item1C" class="marginTop item">
        <div class="unselected"></div>
        <div class="choicesTxt">
            She loves the dry lake and the hot sun.
        </div>
    </div>
    </div>

And this is what I have so far: 

function itemChoose () {
    $(this).toggleClass('selected', 'unselected');
    if ($('.item div:nth-child(1)').hasClass('selected')) {
        $('.item div:nth-child(1)').removeClass('selected').addClass('unselected');
    }
}

    $("#item1A div:nth-child(1)").on('click', itemChoose);
    $("#item1B div:nth-child(1)").on('click', itemChoose);
    $("#item1C div:nth-child(1)").on('click', itemChoose);
    $("#item2A div:nth-child(1)").on('click', itemChoose);
    $("#item2B div:nth-child(1)").on('click', itemChoose);
    $("#item2C div:nth-child(1)").on('click', itemChoose);
    $("#item3A div:nth-child(1)").on('click', itemChoose);
    $("#item3B div:nth-child(1)").on('click', itemChoose);
    $("#item3C div:nth-child(1)").on('click', itemChoose);
    $("#item4A div:nth-child(1)").on('click', itemChoose);
    $("#item4B div:nth-child(1)").on('click', itemChoose);
    $("#item4C div:nth-child(1)").on('click', itemChoose);
    $("#item5A div:nth-child(1)").on('click', itemChoose);
    $("#item5B div:nth-child(1)").on('click', itemChoose);
    $("#item5C div:nth-child(1)").on('click', itemChoose);
    $("#item6A div:nth-child(1)").on('click', itemChoose);
    $("#item6B div:nth-child(1)").on('click', itemChoose);
    $("#item6C div:nth-child(1)").on('click', itemChoose);
    $("#item7A div:nth-child(1)").on('click', itemChoose);
    $("#item7B div:nth-child(1)").on('click', itemChoose);
    $("#item7C div:nth-child(1)").on('click', itemChoose);
    $("#item8A div:nth-child(1)").on('click', itemChoose);
    $("#item8B div:nth-child(1)").on('click', itemChoose);
    $("#item8C div:nth-child(1)").on('click', itemChoose);

Upvotes: 1

Views: 127

Answers (5)

Jon Stevens
Jon Stevens

Reputation: 21

Give the custom radio buttons a class, i.e. 'check', then set an onclick event listener for each one that toggles the selected class on or off. The highlighted styles can be in the css under .check.selected and the unselected styles can be applied to .check.

$('.check').each(function() { 
    $(this).on('click',function() {
        $(this).toggleClass('selected')
    })
});

Upvotes: 0

xdazz
xdazz

Reputation: 160843

You could just do like below:

$('.item').click(function() {
    $(this).find('div:nth-child(1)').toggleClass('selected').toggleClass('unselected');
});

SEE THE WORKING DEMO>

Upvotes: 0

Selvaraj M A
Selvaraj M A

Reputation: 3136

You can add a common class to your checkbox div and write as follows.

<div id="item1B" class="marginTop item">
    <div class="unselected commonClass"></div>
    <div class="choicesTxt">
        She loves to talk and chatter.
    </div>
</div>
<div id="item1C" class="marginTop item">
    <div class="unselected commonClass"></div>
    <div class="choicesTxt">
        She loves the dry lake and the hot sun.
    </div>
</div>


$('.commonClass').toggleClass('selected');

This will toggle the selected class. You can style your div as unchecked when it doesn't have selected class added.

This saves lot of JS code :)

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

you could simply write

$("[id^='item'] div:nth-child(1)").on('click', itemChoose);

[id^='item'] is an attribute selector that matches all elements whose id starts with item

Upvotes: 2

Adil
Adil

Reputation: 148120

You can use class selector instead of id selector to bind the click event as you have class available with elements having ids like item1A, item1B, item1C....

$(".marginTop.item div:nth-child(1)").on('click', itemChoose);

Upvotes: 0

Related Questions