jQuery语法问题-使用'this'并检查CSS属性

LeeTee 发表于 Dev

李泰

我有一个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";

即使在CSS中为.hr-banner-text设置了display：none，也始终返回false。当我尝试将var shouldShow手动设置为true时，hide（）和show（）函数仍然无法正常工作。我认为语法是错误的，“这”是不正确的，但我不知道如何解决。

谁能帮我解决这个问题？我不太喜欢JQuery语法。

杜沙尔

$(".hr-banner-text", this)将.hr-banner-text在current（this）元素内搜索该元素。

由于该元素.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。