jquery - 滑块导航与已连接的项目符号

我正在尝试使用通过线彼此连接的子弹制作滑块。单击项目符号时，这些行将更改颜色。所以问题是，如果再次单击前一个项目符号，如何禁用下一个项目符号？这是link example。

$('label').click(function() {
  $(this).toggleClass('active').prev('.line-element').toggleClass("active");
});

最佳答案

我希望这是您想要的：

$('label').click(function() {
  if(!$(this).hasClass('active'))
  {
      $(this).addClass('active').prev('.line-element').addClass("active");
  }
  $(this).closest('.lines').nextAll('.lines').find('.line-element,label').removeClass('active');
  //Just removeClass from all the next .line-element and label when previous is clicked
});

Updated Pen

如果直接单击第三个label，则以上代码将不起作用。但是下面的修复。

$('label').click(function() {
  if(!$(this).hasClass('active'))
  {
      $(this).addClass('active').prev('.line-element').addClass("active").closest('.lines').prevAll('.lines').find('.line-element,label').addClass('active');
  }
  $(this).closest('.lines').nextAll('.lines').find('.line-element,label').removeClass('active')
});

Updated Pen 2

关于jquery - 滑块导航与已连接的项目符号，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33233182/