我的jQuery函数中的条件语句有问题。我最初以为是id,但是从另一个问题中确认这是正确的。我的问题是为什么条件中的语句永远不会执行
当我单击ID = 5的项目时,该如何解决?



$(function() {
  $('li').click(function(e) {
    e.preventDefault();
    var $this = $(this);

    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(this).addClass('active');
      if ($(this).attr("id") == '5') {
        alert("Not working");
      }
    }

  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
        <li><a href="#" id="1">200</a></li>
        <li><a href="#" id="2">215</a></li>
        <li><a href="#" id="3">221</a></li>
        <li><a href="#" id="4">201</a></li>
        <li><a href="#" id="5">220</a></li>
        <li><a href="#" id="6">250</a></li>
        <li><a href="#" id="7">220</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>

最佳答案

事件处理程序中的this$(this)指发生事件的元素。 click事件绑定到li元素上,而ID绑定在其中的锚元素上。因此,$(this).attr('id')将为undefined,因为<li>上没有ID属性。
利用

$(this).children('a').attr('id')




$('li').click(function(e) {
  e.preventDefault();

  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
    if ($(this).children('a').attr("id") === '5') {
      alert("Working!!!");
    }
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills nav-stacked">Subjects
        <li><a href="#" id="1">200</a></li>
        <li><a href="#" id="2">215</a></li>
        <li><a href="#" id="3">221</a></li>
        <li><a href="#" id="4">201</a></li>
        <li><a href="#" id="5">220</a></li>
        <li><a href="#" id="6">250</a></li>
        <li><a href="#" id="7">220</a></li>
        <li><a href="#">201</a></li>
        <li><a href="#">100</a></li>
        <li><a href="#">101</a></li>
      </ul>
    </div>
  </div>
</div>

09-11 07:23
查看更多