jQuery在单击范围内禁用上一个范围和下一个范围

Question

I'm having trouble applying class to the previous element or the next element.

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

I want to disable the second span, when I click the first span and vice versa.

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

You try to find class .comment-vote-down that doesn't exist in your HTML code

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

Answer 2

try this:

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

It's because you don't have an a with a class of .comment-vote-down, or comment-vote-up.

Either take that part out of your nextAll selection:

.nextAll('a');

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

or, add in the class to your HTML:

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

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

Answer 4

If the .up element is always the previous element from the .down one, you can simply do:

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

As the other answers already stated, there is no spoon element with .comment-vote-down class. But additionally to make life easier, you could buffer the 2 elements, bind the click to them and disable the ones not clicked, reducing the code to

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

fiddle

If you'd want to disable the containing a , the 'other's parent could be obtained by chaining parent() : btns.not(this).parent().addClass('disable-link'); ( or .closest('a') if there is a deeper hierarchy)