Question

我的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>

Answer 1

事件处理程序中的

this和$(this)指的是发生事件的元素。 click事件在li元素上绑定，而ID在其中的anchor元素上。因此，$(this).attr('id')将为undefined，因为<li>上没有ID属性。使用

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

＆＃13;

$('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!!!");
    }
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

因为LI没有id。 ID带有锚标记。

if($(this).find('a').attr("id") == '5') {
                alert("working");
}

Answer 3

请尝试此代码。

$(function() {
  $('li').on('click', 'a', function(e) {
    e.preventDefault();
    var $this = $(this);

    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(this).addClass('active');
      if ($(this).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>

无法在jQuery函数中执行条件语句

3 个答案: