0

我对以下 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/

4

3 回答 3

3

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

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

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

这不包括添加它们各自的悬停类，这可以通过$.each对每个兄弟姐妹执行 a 并使用它们的标题（或其他属性）来完成

$('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/

于 2012-06-06T12:43:58.847 回答
1

我已经整理了一些快速简单的 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/

于 2012-06-06T12:50:11.037 回答
0

我认为这个小提琴将满足您的需求：

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;
        }
    }          
});​
于 2012-06-06T12:43:28.170 回答