JQuery语法问题--使用“this”并检查CSS属性
JQuery语法问题--使用“this”并检查CSS属性
提问于 2016-02-02 13:12:11
我有一个Jquery函数，它运行得很好，就像在一个旧网站上一样。当移动一些内容到一个新的网站，功能不再工作，我不知道这是为什么。
<div class="hr-banner noselect"><img draggable="false" src="/wp-content/uploads/2015/11/people-development.jpg" alt="" /></div>
<p class="hr-banner-title">People Development</p>
<div class="hr-banner-text">
As an employer, we understand the value of investing in the skills and knowledge of our employees, allowing
them to develop and achieve their own professional goals.
</div>
<div class="hr-banner noselect"><img draggable="false" src="/wp-content/uploads/2015/11/people-development.jpg" alt="" /></div>
<p class="hr-banner-title">People Development</p>
<div class="hr-banner-text">
As an employer, we understand the value of investing in the skills and knowledge of our employees, allowing
them to develop and achieve their own professional goals.
</div>
$(".hr-banner").click(function(evt) {
var shouldShow = $(".hr-banner-text", this).css("display") == "none";
console.log(shouldShow);
$(".hr-banner-title", this).hide();
$(".hr-banner-text", this).show();
if (shouldShow) {
$(".hr-banner-title", this).hide();
$(".hr-banner-text", this).show();
console.log("should show");
} else {
$(".hr-banner-title", this).show();
$(".hr-banner-text", this).hide();
console.log("no show");
}
});我已经设置了一个JS小提琴，它在那里也不工作，所以我不知道它如何在旧网站上工作！
这句话：
var shouldShow = $(".hr-banner-text", this).css("display") == "none";始终返回false，即使在.hr-banner-text的CSS中设置了显示:none当我尝试手动将var shouldShow设置为true时，hide()和()函数仍然不能工作。我认为语法是错误的，而‘这’是不正确的，但我不知道如何修复。
有人能帮我把这事做好吗？我对JQuery语法不太在行。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-02 13:18:27
$(".hr-banner-text", this)将在当前(This)元素中搜索元素.hr-banner-text。
由于元素.hr-banner-text不是嵌套在.hr-banner元素中，所以不会选择任何元素。
您需要使用siblings()。
另外，与.css('display')不同，我建议使用.is(':visible')或is(':hidden')来检查元素的可见性。
var shouldShow = $(this).siblings('.hr-banner-text').is(":hidden");查看小提琴中的注释代码，您将尝试根据元素的可见性来切换元素。您可以使用toggle()。
在.hr-banner中包装元素之后
$(".hr-banner").click(function() {
$(".hr-banner-title, .hr-banner-text").toggle();
});.hr-banner {
padding: 0;
margin-bottom: 1em;
cursor: pointer;
}
.hr-banner > img {
width: 98%;
}
.hr-banner-title {
margin: 0;
color: #FFF;
line-height: 2em;
margin-top: -3em;
margin-left: 16px;
font-size: 24px;
font-weight: bold;
}
.hr-banner-text {
display: none;
position: absolute;
top: 0;
padding: 16px;
color: #FFF;
font-size: 1.2em;
background-color: rgba(0, 0, 0, 0.6);
width: 98%;
height: 100%;
}
.hr-noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hr-banner noselect"><img draggable="false" src="https://daisygroup.com/wp-content/uploads/2015/11/people-development.jpg" alt="" />
<p class="hr-banner-title">People Development</p>
<div class="hr-banner-text">
As an employer, we understand the value of investing in the skills and knowledge of our employees, allowing them to develop and achieve their own professional goals.
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35154504
复制相关文章
相似问题
腾讯云开发者
