如果“ li”具有此ID，请不要添加活动类

Question

我是jQuery的新手。

如果点击的元素“ li”的ID为“ disabled”，则不要添加“ active”类。

HTML：

<ul class="navigation-links">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li id="disabled">test1</li>
    <li id="disabled">test2</li>
</ul>

CSS：

.active{
    color: red;
}

jQuery：

$("body").on("click", ".navigation-links li", function () {         
    if( $(".navigation-links li").is("#disabled") ){
        $(".navigation-links li").removeClass("active");
    }
    $(this).addClass("active");
});

Answer 1

首先，id应该是唯一的，因此请使用类。然后，您可以使用jQuery的hasClass()

$("body").on("click", ".navigation-links li", function() {
  var $clickedLi = $(this);                                  // put the clicked element in a var
  
  $('.navigation-links li').not($clickedLi).removeClass("active"); // remove class from all li except clicked
  
  if (!$clickedLi.hasClass('disabled')) {                    // only do this if the clicked element 
    $clickedLi.toggleClass("active");                        // only toggle the class on the clicked li
  }
});

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navigation-links">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li class="disabled">test1</li>
  <li class="disabled">test2</li>
</ul>

Answer 2

尝试

检查$(this).is("#disabled")而不是$(".navigation-links li").is("#disabled")

$("body").on("click", ".navigation-links li", function() {

  if (!$(this).is("#disabled")) {
      $(".navigation-links li").removeClass("active");
      $(this).addClass("active");
  }
});

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navigation-links">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li id="disabled">test1</li>
  <li id="disabled">test2</li>
</ul>

Answer 3

$(document).ready(function(){
$("body").on("click", ".navigation-links li", function() {

  if ($(this).attr('id')!='disabled') {
    $(this).addClass("active");
  }

  $(this).siblings().removeClass('active');
});


});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navigation-links">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li id="disabled">test1</li>
  <li id="disabled">test2</li>
</ul>