admin管理员组文章数量:1327661
I'm using jQuery to select a button on my website and add an event listener to add a night-time
class when it is clicked.
Initially the button works, however when I click the button again it won't run the code to remove the night-time
class.
Here is the JavaScript code:
var night_time = false;
if (!night_time) {
$('.blog-desc').find('a').on('click', function() {
$('html').addClass('night-time').animate(200);
night_time = true;
console.log("Making it night!");
});
} else {
$('.blog-desc').find('a').on('click', function() {
$('html').attr('class', "");
night_time = false;
console.log("Making it day!");
});
}
I really don't know why this isn't working, but I feel like I'm missing something painfully obvious. Also, the .animate({}, 200)
isn't working either, as it just instantly applies the class, but this problem isn't as important to me as the main one.
I'm using jQuery to select a button on my website and add an event listener to add a night-time
class when it is clicked.
Initially the button works, however when I click the button again it won't run the code to remove the night-time
class.
Here is the JavaScript code:
var night_time = false;
if (!night_time) {
$('.blog-desc').find('a').on('click', function() {
$('html').addClass('night-time').animate(200);
night_time = true;
console.log("Making it night!");
});
} else {
$('.blog-desc').find('a').on('click', function() {
$('html').attr('class', "");
night_time = false;
console.log("Making it day!");
});
}
I really don't know why this isn't working, but I feel like I'm missing something painfully obvious. Also, the .animate({}, 200)
isn't working either, as it just instantly applies the class, but this problem isn't as important to me as the main one.
-
You could user the
removeClass
method as you are using theaddClass
– chiapa Commented Mar 24, 2015 at 15:03 - There should only be one event listener and the conditional statement should be on the inside of the listener, not the outside. – APAD1 Commented Mar 24, 2015 at 15:03
-
well you set
night_time = false
everytime before the if statement is called. You will always land in the first case – chillichief Commented Mar 24, 2015 at 15:05
8 Answers
Reset to default 6Updating your night_time
variable won't automagically change the event handler.
Try this instead:
var night_time = false,
$html = $('html');
$('.blog-desc').find('a').on('click', function() {
night_time = !night_time;
$html.toggleClass('night-time', night_time);
console.log(night_time ? "Making it night!" : "Making it day!");
});
var night_time = false,
$html = $('html');
$('.blog-desc').find('a').on('click', function() {
night_time = !night_time;
$html.toggleClass('night-time', night_time);
console.log(night_time ? "Making it night!" : "Making it day!");
});
.night-time {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-desc">
<a>Click me</a>
</div>
From you code what I understand is you want to toggle the presents of the class night-time
$('.blog-desc').find('a').on('click', function () {
$('html').toggleClass('night-time');
});
If you want to do something else depending on the state(night/day) you can test for the presents of the class
$('.blog-desc').find('a').on('click', function () {
var $html = $('html').toggleClass('night-time');
if ($html.hasClass('night-time')) {
console.log('now it is night')
} else {
console.log('now it is day')
}
});
In your code the problem is the if
condition is evaluated only once when the page is loaded then since the default value is false
the if
block is executed and addClass()
callback is executed, the second handler is not registered at all.
If for any reason you want to check a case like this you need to have a single click handler and check the condition within the click handler
$('.blog-desc').find('a').click(function () {
$('html').toggleClass('night-time');
});
Your conditional is outside of the click handler. You mean for it to behave like this:
var night_time = false;
$('.blog-desc').find('a').on('click', function() {
if (!night_time) {
$('html').addClass('night-time').animate(200);
night_time = true;
console.log("Making it night!");
}
else {
$('html').attr('class', "");
night_time = false;
console.log("Making it day!");
}
});
It looks like you have structured your if statement incorrectly. You would want to check your clicks first then decide if its night_time
or not.
$('.blog-desc').find('a').on('click', function () {
if (!night_time) {
//code...
} else {
//code...
}
});
The way you have it, only only one click event will be added to your .blog-desc
. You should change it so that your logic allows for this button to switch night_time on and off with just one event:
var night_time = false;
$('.blog-desc').find('a').on('click', function() {
if (night_time) {
$('html').attr('class', "");
night_time = false;
console.log("Making it day!");
} else {
$('html').addClass('night-time').animate(200);
night_time = true;
console.log("Making it night!");
}
});
How about adding a listener just once to the "button" and handling the class change in a single function as well.
Little sample: http://jsfiddle/entr0cks/33grpurh/
var $html = $('html'),
NIGHT_CLASS = 'night-time';
$html.addClass(NIGHT_CLASS);
$html.on('click', toggleNight);
function toggleNight(){
if($html.hasClass(NIGHT_CLASS)){
$html.removeClass(NIGHT_CLASS);
} else {
$html.addClass(NIGHT_CLASS);
}
}
You needed to move the click event out of the if statement and put the if statement in the click event.
var night_time = false;
$('.blog-desc').find('a').on('click', function() {
console.log("blog-desc a was clicked");
if (night_time == false) {
$('html').addClass('night-time').animate(200);
night_time = true;
console.log("night_time value: " + night_time + " (Should be True)");
} else {
$('html').attr('class', "");
night_time = false;
console.log("night_time value: " + night_time + " (Should be False)");
}
});
本文标签: jqueryJavaScript ifelse not acting as expectedStack Overflow
版权声明:本文标题:jquery - JavaScript ifelse not acting as expected - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742229004a2436866.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论