它将每条日志打印出
false// 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.com/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>我相信
$(".content").find(".new-photo").toggleClass('show-new-photo');
仅切换“.new-photo”元素上的“show-new-photo”类，而不是“.content”元素。
除非我错过了什么
console.log($("content").hasClass('show-new-photo'));
无论是之前还是之后都会输出相同的内容
$(".content").find(".new-photo").toggleClass('show-new-photo');
因为无论 $(".content") 是否具有“show-new-photo”类，该行代码都不会改变。
它也应该是 $(".content")，而不是 $("content")。
hasClass 方法不适用于子节点。
你可以使用类似的东西
return $(".content").find('.show-new-photo').length > 0;
尝试
console.log($(".content").hasClass('show-new-photo'));
我相信这应该通过添加“.”类来实现。在你的选择器中
正如 Luiz Paulo Evangelista 在另一个回答中所述， hasClass 显然不适用于子元素 我的解决方案如下：
this.classList.contains("show-new-photo")
如果使用这个， 否则
$(".content").context.classList.contains("show-new-photo")
我觉得也许更优雅一点