admin管理员组文章数量:1327661
It prints out false
for every single log to the console. Toggling works fine when clicking the nav link and cancel button. I've look at this question and tried all the suggestions but still had the same problem.
// add new photo toggle
$('#click_new_photo a').click(function() {
console.log($(".content").hasClass('show-new-photo'));
$(".content").find(".new-photo").toggleClass('show-new-photo');
console.log($(".content").hasClass('show-new-photo'));
});
$("#cancel_add_new_photo").click(function() {
console.log($(".content").hasClass('show-new-photo'));
$(".new-photo").toggleClass("show-new-photo");
console.log($(".content").hasClass('show-new-photo'));
});
.new-photo {
width: 300px;
height: 200px;
border-radius: 5px;
background: #34609d;
box-shadow: 1px 1px #d6d6d6;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 100;
transition: opacity 0.5s ease;
opacity: 0;
}
.show-new-photo {
opacity: 1;
}
<script src=".1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li id="click_new_photo"><a href="#">New Photo</a></li>
</ul>
</nav>
<div class="content">
<div class="new-photo">
<button id="cancel_add_new_photo">Cancel</button>
</div>
...
</div>
...
</body>
It prints out false
for every single log to the console. Toggling works fine when clicking the nav link and cancel button. I've look at this question and tried all the suggestions but still had the same problem.
// add new photo toggle
$('#click_new_photo a').click(function() {
console.log($(".content").hasClass('show-new-photo'));
$(".content").find(".new-photo").toggleClass('show-new-photo');
console.log($(".content").hasClass('show-new-photo'));
});
$("#cancel_add_new_photo").click(function() {
console.log($(".content").hasClass('show-new-photo'));
$(".new-photo").toggleClass("show-new-photo");
console.log($(".content").hasClass('show-new-photo'));
});
.new-photo {
width: 300px;
height: 200px;
border-radius: 5px;
background: #34609d;
box-shadow: 1px 1px #d6d6d6;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 100;
transition: opacity 0.5s ease;
opacity: 0;
}
.show-new-photo {
opacity: 1;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<li id="click_new_photo"><a href="#">New Photo</a></li>
</ul>
</nav>
<div class="content">
<div class="new-photo">
<button id="cancel_add_new_photo">Cancel</button>
</div>
...
</div>
...
</body>
Share
Improve this question
edited May 23, 2017 at 12:32
CommunityBot
11 silver badge
asked Mar 23, 2017 at 2:38
stumpedstumped
3,2937 gold badges47 silver badges80 bronze badges
2
-
in your demo there is no class
'show-new-photo'
in content – guradio Commented Mar 23, 2017 at 2:41 - Also the selector "content" is quite distinctly different from ".content" – Pointy Commented Mar 23, 2017 at 2:41
4 Answers
Reset to default 4I believe
$(".content").find(".new-photo").toggleClass('show-new-photo');
only toggles the 'show-new-photo' class on the '.new-photo' element, not the ".content" element.
Unless I'm missing something
console.log($("content").hasClass('show-new-photo'));
will out put the same thing whether it's before or after
$(".content").find(".new-photo").toggleClass('show-new-photo');
because that line of code does not change whether or not $(".content") has the class "show-new-photo" or not.
Also it should be $(".content"), not $("content").
the hasClass method don´t work with child nodes.
You can use something like that
return $(".content").find('.show-new-photo').length > 0;
Try
console.log($(".content").hasClass('show-new-photo'));
I believe this should work by adding the class "." in your selector
As stated in another answer by Luiz Paulo Evangelista, the hasClass apparently don't work with child elements my solution is the following:
this.classList.contains("show-new-photo")
if using this, else
$(".content").context.classList.contains("show-new-photo")
i think it's a little more elegant maybe
本文标签: javascripthasClass() always returns false (jquery) even when toggling itStack Overflow
版权声明:本文标题:javascript - hasClass() always returns false (jquery) even when toggling it - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742231116a2437230.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论