设置图像的src时显示/隐藏占位符

Question

如果设置了.placeholder的{​​{1}}，如何隐藏.image，并且在未设置src时隐藏.image？ / p>

src

Answer 1

在.image集合上循环，如果.placeholder为空，则隐藏兄弟src：

$('.image').each(function() {
  var src = $(this).attr('src');
  
  if (src && src.trim().length > 0) {
    $(this).siblings('.placeholder').hide();
  } else {
    $(this).hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="hide-placeholder">
    <img class="placeholder" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png">
    <img class="image" src="http://inddc.in/webroot/assets/img/sample/shortcode/logo/1.png">
</label>
<label id="hide-image">
    <img class="placeholder" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png">
    <img class="image" src="">
</label>

Answer 2

一种不同的方法

如果src为空则隐藏CSS

img[src=""] {
   display: none;
}

JavaScript隐藏占位符

$(".image[src='']").siblings(".placeholder").hide();