Question

我在将类应用于前一个元素或下一个元素时遇到了问题。

<a href="#"><span class="glyphicon glyphicon-thumbs-up up"></span>
<a href="#"><span class="glyphicon glyphicon-thumbs-down down"></span>

当我点击第一个跨度时，我想禁用第二个跨度，反之亦然。

$(document).on('click','.up, .down',function (e){
    e.preventDefault();
    if ($(this).hasClass('up')){
        var down = $(this).parent().nextAll('a.comment-vote-down');
        down.removeClass('disable-link').addClass('disable-link');
    }else if($(this).hasClass('down')){
        var up = $(this).parent().prevAll('a.comment-vote-up');
        up.removeClass('disable-link').addClass('disable-link');
    }
});

example on jsfiddle

Answer 1

您尝试查找HTML代码中不存在的课程.comment-vote-down

https://jsfiddle.net/xnovq390/4/

Answer 2

试试这个：

$(document).on('click','.up, .down',function (e){
        e.preventDefault();
        if ($(this).hasClass('up')){
            var down = $(".down");
            down.removeClass('disable-link').addClass('disable-link');
        }else if($(this).hasClass('down')){
            var up = $(".up");
            up.removeClass('disable-link').addClass('disable-link');
        }
    });

Answer 3

这是因为你没有一个带有.comment-vote-down或者评论投票的类。

将该部分从你的下一个选择中取出：

.nextAll('a');

https://jsfiddle.net/xnovq390/1/

或者，将类添加到HTML中：

<a href="#" class="comment-vote-up">

https://jsfiddle.net/xnovq390/3/

Answer 4

如果.up元素始终是.down元素中的上一个元素，则可以执行以下操作：

$(document).on('click', '.up, .down', function(e) {
    e.preventDefault();
    if ($(this).hasClass('up')) $(this).next().addClass('disable-link');
    else $(this).prev().addClass('disable-link');
}

Answer 5

  $(document).on('click','.up, .down',function (e){
        e.preventDefault();
        if ($(this).hasClass('up')){
            $(this).addClass('disable-link');
            $('span.down').removeClass('disable-link');

        }else if($(this).hasClass('down')){
            $(this).addClass('disable-link');
            $('span.up').removeClass('disable-link');
        }
    });

Answer 6

正如其他答案已经陈述的那样，没有带有.comment-vote-down类的 ~~spoon~~ 元素。但另外为了让生活更轻松，你可以缓冲2个元素，将点击绑定到它们并禁用未点击的元素，将代码减少到

var btns = $('.up, .down');
btns.click(function(){
    btns.not(this).addClass('disable-link');
});

fiddle

如果您要禁用包含a，可以通过链接父（）btns.not(this).parent().addClass('disable-link');（或.closest('a')，如果存在更深的层次结构）来获取其他父项

jQuery在单击跨度上禁用上一个跨度和下一个跨度

6 个答案: