Question

如果图像“ 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>

Answer 1

您为什么不进行与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>

Answer 2

由于您已经在使用jQuery，因此一种快速的解决方案是使用.attr()（docs）。它可能看起来像这样：

if ($('.s-lib-featured-profile-image img').attr('src') === "//libapps.s3.amazonaws.com/apps/common/images/profile.jpg") {
  //your custom logic here
}

如果您需要隐藏整个div，请尝试使用类似.addClass()（docs）的类来添加具有CSS属性display: none的类。

Answer 3

下面是一个简单的代码段，显示了如何进行：在给定条件的情况下选择子项，然后隐藏其父项：

$('.hide-my-parent').each(function() {
  $(this).parent('.parent-class').hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="parent-class">
  hide me!
  <span class="hide-my-parent">
    hide my parent!
  </span>
</div>

<div class="parent-class">
  don't hide me!
  <span>
    don't hide my parent!
  </span>
</div>

当然，还有可以使用的完整，可读性较低的代码：

const defaultUrl = 'https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg';

$(`.s-lib-featured-profile-image [src="${defaultUrl}"]`)
  .parent('div')
  .parent('a')
  .parent('.s-lib-featured-profile-container')
  .hide()

/* just a helper to show that the div has been hidden */
.s-lib-featured-profile-container {
  border: solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- will be hidden -->
<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>

<!-- will not be hidden -->
<div class="s-lib-featured-profile-container">
  <a href="/prf.php?account_id=127256">
    <div class="s-lib-featured-profile-image">
      <img src="http://picsum.photos/100/100" alt="">
    </div>
    <div class="s-lib-profile-div s-lib-featured-profile-name"></div>
  </a>
</div>

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

3 个答案: