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