单击一个链接可禁用java脚本中的其他链接

Question

您好我想点击其中一个链接后禁用所有其他链接，除了点击的链接。

到目前为止，这是我的代码：

JavaScript的

$(".link-chart").click(function($e) {
    if($(this).find(".link-selector-two").hasClass('red')) {
          $('.link-selector-two', this).addClass('cssclass');
          $('.link-selector-one', this).addClass('cssclass');
    } else {
      $('.link-selector-two', this).removeClass('cssclass');
    }
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="link-chart lx-link-chart">
  <div class="link-selector-one">
    <div class="link-selector-two red">One</div>
  </div>
</a>
<a href="#" class="link-chart lx-link-chart">
  <div class="link-selector-one">
    <div class="link-selector-two red">Two</div>
  </div>
</a>

因此，例如，如果我单击第一个链接以禁用第二个链接，如果我再次单击第一个链接，它将以其现在工作的方式取消选择第一个链接，以便第二个链接可再次选择。 如果我单击第二个链接以禁用第一个链接，则相同的选项适用于第二个链接。

欢迎任何帮助，让我知道必须采取哪种方法。

Answer 1

你可以这样做：

JS

var $linkChart = $('.link-chart');

$linkChart.click(function(e) {
  $linkChart.each(function() {
    if (e.currentTarget !== this) {
      $(this).toggleClass('disabled');
    }
  });
});

SCSS

.link-chart { 
  &.disabled {
    pointer-events: none;
    opacity: 0.25;
  }
}

这是一个显示它在行动的小提琴 。 仅供参考，我添加了第三个链接，以便您可以看到它对于您想要添加的链接的工作方式完全相同。