user7212497
user7212497

Reputation:

Can't execute conditional statement inside jQuery function

I have a problem with conditional statement in my jQuery function. I initially thought it was the id but confirmed in from another question that this is correct. My question is why the statement inside the condition never executes when I click the item with id= 5 and how can I fix this?

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

Upvotes: 0

Views: 50

Answers (3)

vijay
vijay

Reputation: 332

please try this code.

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

Upvotes: 0

Tushar
Tushar

Reputation: 87203

this and $(this) inside event handler refer to the element on which event has occurred. The click event is binded on li element while ID is on the anchor element inside it. So, $(this).attr('id') will be undefined as there is no ID attribute on <li>. Use

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

Upvotes: 2

Tuhin
Tuhin

Reputation: 3373

Because LI does not have the id. ID is with the anchor tag.

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

Upvotes: 0

Related Questions