Question

我试图制作带有子弹的滑块，这些子弹通过线相互连接。单击子弹时，这些线将改变颜色。所以问题是如果再次点击上一个项目符号，如何禁用下一个项目符号？这是link example。

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

Answer 1

我希望这就是你想要的：

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

如果您直接点击第3 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

滑块导航与连接的子弹

1 个答案: