隐藏一个容器而不隐藏所有容器

时间：2019-04-02 18:47:42

标签： javascript css

如果缺少个人资料图片，则需要隐藏整个<div>，但允许其余<div>拥有相同的类别。我的jsfiddle似乎很近，但是任何人都可以检查我的工作吗？

我的工作还需要在封闭系统（Springshare / LibGuides）的CSS / JS页面中进行，这意味着我无法添加任何内联调用等。

$(() => {
  var src = $('img').attr('src');
  if (src === '//libapps.s3.amazonaws.com/apps/common/images/profile.jpg'){
    $('.s-lib-featured-profile-container').hide();
    } 
  else {
    $('.s-lib-featured-profile-container').show();
  }
})
<div class="s-lib-featured-profile-container"><a href="/prf.php?account_id=127256">
    <div class="s-lib-featured-profile-image">
      <img src="//libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt="Julie Brewer's picture">
    </div>
    <div class="s-lib-profile-div s-lib-featured-profile-name">Julie Brewer</div></a>
</div>
 
 
 
<div class="s-lib-featured-profile-container"><a href="/prf.php?account_id=131922">
    <div class="s-lib-featured-profile-image">
      <img src="//libapps.s3.amazonaws.com/accounts/131922/profiles/125264/Caldwell_John.jpg" alt="John Caldwell's picture">
    </div>
    <div class="s-lib-profile-div s-lib-featured-profile-name">John Caldwell</div></a>
</div>

请检查jsfiddle示例以获取更多详细信息：

https://jsfiddle.net/Raser/nq5swa10/3/

最终，使用img和src调用，代码应隐藏包含“朱莉·布鲁尔”的整个<div class="s-lib-featured-profile-container">，并显示包含“ John”的整个<div class="s-lib-featured-profile-container">考德威尔”。

感谢您的帮助！

3 个答案:

答案 0 :(得分：3)

您需要循环所有包含所需图像的div。请注意，浏览器将当前方案添加到以//开头的url中，因此您可以使用诸如搜索之类的endsWith。

$(() => {
  $(".s-lib-featured-profile-container").each((index, container) => {
    var src = $(container).find('img').prop('src');
    console.log(src);
    if (src === 'https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg') {
      $(container).hide();
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

</head>

<body>


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



  <div class="s-lib-featured-profile-container">
    <a href="/prf.php?account_id=131922">
      <div class="s-lib-featured-profile-image">
        <img src="//libapps.s3.amazonaws.com/accounts/131922/profiles/125264/Caldwell_John.jpg" alt="John Caldwell's picture">
      </div>
      <div class="s-lib-profile-div s-lib-featured-profile-name">John Caldwell</div>
    </a>
  </div>



</body>

</html>

答案 1 :(得分：0)

您选择了所有图像并将其隐藏，您需要对图像进行迭代，然后为每个图像确定是否隐藏它。

x=Decimal(row[1]).normalize()
text_file.write(x)

$(() => {
  var allItems = $('.s-lib-featured-profile-container');
  allItems.each(function(){
    var image = $(this).find('img');
    if (image && image.attr('src') === '//libapps.s3.amazonaws.com/apps/common/images/profile.jpg'){
      $(this).hide();
    }
  });
})
img{
 width: 100px;
}

答案 2 :(得分：0)

代替使用.each，可以使用JQuery .filter方法来过滤掉具有带有默认图片的图像的那些图像容器。然后只需使用.hide隐藏它们即可。

代码：

var with_default_profile = $(".s-lib-featured-profile-image")
  .filter(function() {
    return $(this).find("img")
    .attr("src") === "//libapps.s3.amazonaws.com/apps/common/images/profile.jpg";
  })
  with_default_profile.hide();

带注释的代码：

// grab all the image containers

var with_default_profile = $(".s-lib-featured-profile-image")

// filter the image containers by asking
// does this container have an img with src ".../jpg" ?

  .filter(function() {
    return $(this).find("img")
    .attr("src") === "//libapps.s3.amazonaws.com/apps/common/images/profile.jpg";
  })

// hide all the images that answered the question with "yes".

  with_default_profile.hide();

为什么在filter上使用each？

Filter带来了使代码更具可读性和可扩展性的额外好处。将来，如果您看一下代码，就会知道它正在过滤，而不仅仅是遍历列表。

filter比each好吗？

这值得商bat。使用each，您可以遍历列表once并隐藏元素。显然，由于filter / hide方法会进行迭代，而 then 会隐藏每个元素，从而有效地进行迭代，因此，这种方法的性能更高。话虽如此，性能差异很可能是可以忽略的。相反，使用filter的好处是更高的代码完整性，但是each并没有被移除，以至于做出错误的选择。

基本上...

由您决定

代码段：

$(() => {
  var with_default_profile = $(".s-lib-featured-profile-image")
  .filter(function() {
    return $(this).find("img").attr("src") === "//libapps.s3.amazonaws.com/apps/common/images/profile.jpg";
  })
  with_default_profile.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="//libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt="Julie Brewer's picture">
    </div>
    <div class="s-lib-profile-div s-lib-featured-profile-name">Julie Brewer</div></a>
</div>
 
 
 
<div class="s-lib-featured-profile-container"><a href="/prf.php?account_id=131922">
    <div class="s-lib-featured-profile-image">
      <img src="//libapps.s3.amazonaws.com/accounts/131922/profiles/125264/Caldwell_John.jpg" alt="John Caldwell's picture">
    </div>
    <div class="s-lib-profile-div s-lib-featured-profile-name">John Caldwell</div></a>
</div>

相关问题
最新问题