Question

I have a set of elements like this:

<ol id="selectable">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
    <li class="ui-state-default">E</li>
    <li class="ui-state-default">F</li>
    <li class="ui-state-default">G</li>
    <li class="ui-state-default">H</li>
    <li class="ui-state-default">I</li>
    <li class="ui-state-default">J</li>
    <li class="ui-state-default">K</li>
    <li class="ui-state-default">L</li>
</ol>

This is my jquery code:

$(function() {
        $( "#selectable" ).click(function(){
            $(this).switchClass( "ui-state-highlight", 1000 );
            return false;   
        });
    });

For some reason I am having trouble understanding what I am doing wrong. I think I may be misunderstanding the meaning of ‘this’. I want the switchClass only to switch the class of whichever element I clicked on.

Answer 1

What you want is this

$(function() {
    // Use $( "#selectable > li" ) if you want to limit to direct children
    $( "#selectable li" ).click(function(){  //  binds the click event all li descendants of selectable
        $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);  // this is now the li that was clicked
        return false;   
    });
});

better way would be to delegate as it’s more efficient by not binding an event handler to each li but having a parent element listen for the event as it bubbles up

$(function() {
    $( "#selectable" ).on('click','li'(function(){  
        $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);  // this is now the li that was clicked
        return false;   
    });
});

unless you want to click each #selectable which wouldn’t be valid since ID’s need to be unique. You can change it to a class and use

$(function() {
    $( ".selectable" ).click(function(){  
        $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);  
        return false;   
    });
});

You can use toggleClass like the following

$(function() {
    $("#selectable").on('click', 'li', function() {
        $(this).toggleClass("ui-state-default ui-state-highlight"); // this is now the li that was clicked
        return false;
    });
});​

http://jsfiddle.net/G33Mc/