Question

I would like to know if some one can improve my code… Using jQuery I’m trying to apply a class on the element we just click and disable this class on the other elements.

You will se in my code that I’m trying to apply a class on the I just clicked and remove all the class on the others elements.

But for the moment, I’m doing it the “easy and mega long way” as you can see in $(“choice1-1”).click(function()

Can some help me with a code that could detect all the others ID ?

Here my code for the moment

$(document).ready(function() 
{
    $('#stick-question-1').mouseenter(function() 
    {
        $('#stick-choices-1').show();

    });

    $('#stick-choices-1').mouseleave(function() 
    {
        $('#stick-question-1').show();
        $('#stick-choices-1').hide();
    });


    $("choice1-1").click(function()
    {
        $(this).addClass('hover-etat');
        $("#choice1-2").removeClass('hover-etat');
        $("#choice1-3").removeClass('hover-etat');
        $("#choice1-4").removeClass('hover-etat');
    });

});

And my HTML is like this

    <div id="stick-choices-1" class="stick-choices">
        <a href="#" onclick="displayChoice1('Under 3\'9'); return false;" id="choice1-1">Under 3'9</a>
        <a href="#" onclick="displayChoice1('4\' to 5\'2'); return false;" id="choice1-2">4' to 5'2</a>
        <a href="#" onclick="displayChoice1('5\'3 to 5\'7'); return false;" id="choice1-3">5'3 to 5'7</a>
        <a href="#" onclick="displayChoice1('5\'8 and more'); return false;" id="choice1-4">5'8 and more</a>        
    </div>

Answer 1

Just use:

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $('.hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

I’ve changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.

It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $('#stick-choices-1 .hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

Or:

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $(this).siblings('.hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });