jQuery 设置样式

Question

我对以下 jQuery 脚本有疑问:

$('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");
    }            
});

我希望它的工作方式是，如果我点击一个跨度(special、listed 或 unlisted)，另一个跨度不活跃。我如何使用 jQuery 做到这一点？

我创建了这个脚本但没有正常工作。 http://jsfiddle.net/3nsrd/

Answer 1

您可以使用 .siblings() 选择所有其他跨度。这是一个例子:

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

演示 http://jsfiddle.net/3nsrd/4/

这不包括添加他们各自的悬停类，这可以通过对每个 sibling 执行 $.each 并使用他们的标题(或其他属性)来完成

$('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');
        });
});​

演示:http://jsfiddle.net/3nsrd/6/