jQuery禁用先前的跨度和下一个跨度，点击跨度

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

你试图找到类.comment-vote-down不会在你的HTML代码中存在

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的类，投票下来或评论投票。

任取的那部分你nextAll选择：

.nextAll('a'); 

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

，或者在类添加到您的HTML：

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

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

Answer 4

如果.up元素总是th E从.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类。 但还使生活更轻松，你可以缓冲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')如果有更深的层次结构）