Question

I have a problem with the below jQuery script:

$('span').click(function(){
    var info = $(this).attr("rel");
    var reference = this;
    if ($(this).hasClass('listed')) {
        // alert('follow');
        $(".unlisted").addClass("unlisted-bw");
        $(".special").addClass("special-bw");
    }

    if ($(this).hasClass('special')) {
        // alert('follow');
        $(".unlisted").addClass("unlisted-bw");
        $(".listed").addClass("listed-bw");
    }   

    if ($(this).hasClass('unlisted')) {
        // alert('follow');
        $(".listed").addClass("listed-bw");
        $(".special").addClass("special-bw");
    }            
});

I want it to work in a way that if I click on one span (special, listed or unlisted), The other spans to be inactive. How can I do this with jQuery ?

I created this script but not working correctly.
http://jsfiddle.net/3nsrd/

Answer 1

You can select all of the other spans using .siblings(). Here’s an example:

$('span').click(function(e) {   
    $(this).removeClass('special-bw')
            .siblings("span")
            .addClass('special-bw');
});​

DEMO http://jsfiddle.net/3nsrd/4/

This doesn’t include adding their individual hover classes, which could be done by doing a $.each on each of the siblings and using their title (or another attribute)

$('span').click(function(e) {
    //get the name of the selected span
    selectedSpan = $(this).attr("title");

    //remove class of selected span -bw (i.e. special-bw);
    $(this).removeClass(selectedSpan+'-bw')
           .siblings("span").each(function(){
            //foreach of the other spans, add their name + bw
           $(this).addClass($(this).attr("title")+'-bw');
        });
});​

DEMO: http://jsfiddle.net/3nsrd/6/