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

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

这不包括添加他们各自的悬停类，这可以通过对每个兄弟姐妹进行$.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');
        });
});

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

Answer 2

我已经整理了一个快速而简单的javascript，它可以满足您的需求：

$(document).ready(function() { //When the DOM is ready
    $('span').on('click', function() {
        $this = $(this);
        if (!$this.hasClass("disabled")) {
            $this.siblings().addClass("disabled");
        }
    });
});

基本上我将一个禁用的类添加到兄弟姐妹中，然后可以使用：

进行样式设置

.disabled {
    background:#ccc;
    cursor:default;
}

查看实际操作：http://jsfiddle.net/uBSX6/

Answer 3

我认为这个小提琴符合您的需求：

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

$('span').click(function(){
    var parent = $(this).parent();

    var classes = ['listed', 'special', 'unlisted'];

    for (var i = 0; i < classes.length; i++) {
        if ($(this).hasClass(classes[i])) {
            for (var j = 0; j < classes.length; j++) {
                if (classes[j] != classes[i]) {
                    $(parent).find('.' + classes[j]).addClass(classes[j] + '-bw');
                }
            }
            $(this).removeClass(classes[i] + '-bw');
            break;
        }
    }          
});

或没有嵌套循环的更短版本：

$('span').click(function(){
    var parent = $(this).parent();

    var classes = ['listed', 'special', 'unlisted'];

    for (var i = 0; i < classes.length; i++) {
        if ($(this).hasClass(classes[i])) {
            $(parent).find(':not(.' + classes[i] + ')').each(function() {
                $(this).addClass($(this).prop('class') + '-bw');
            });
            $(this).removeClass(classes[i] + '-bw');
            break;
        }
    }          
});

jQuery设置样式

3 个答案: