时间戳

首页 > 解决方案 > 使用脚本根据 CSS 条件隐藏整个 div？

javascript - 使用脚本根据 CSS 条件隐藏整个 div？

问题描述

如果图像“src”使用空白头像图像，我目前正在使用 CSS 隐藏类：

<style>
.s-lib-featured-profile-image [src="//libapps.s3.amazonaws.com/apps/common/images/profile.jpg"] {
    display:none;
}
</style>

但是，我还需要创建一个条件（jQuery？，javascript？），当上述情况为真时，它将隐藏整个 div（class="s-lib-featured-profile-container"）。

 <div class="s-lib-featured-profile-container">
        <a href="/prf.php?account_id=127256">
            <div class="s-lib-featured-profile-image">
                <img src="https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt="">
            </div>
            <div class="s-lib-profile-div s-lib-featured-profile-name"></div> 
        </a>
    </div>

我目前正在实施以下脚本但没有成功。

<script type="text/javascript">
$(document).ready(function() {
 if( $('.s-lib-featured-profile-image').text()=='' ) {
$('.s-lib-featured-profile-container').hide();
}
    });
</script>

标签： javascripthtmlcss

解决方案

为什么不进行与 CSS 相同的查询？

$(document).ready(function() {
 if( $('.s-lib-featured-profile-image img[src="https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg"]').length ) {
    console.log('hiding...');
    $('.s-lib-featured-profile-container').hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="s-lib-featured-profile-container">
    <a href="/prf.php?account_id=127256">
        <div class="s-lib-featured-profile-image">
            <img src="https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt="">
        </div>
        <div class="s-lib-profile-div s-lib-featured-profile-name"></div> 
    </a>
</div>

推荐阅读