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

原文 标签 jquery html css

如何隐藏 .placeholder当一个 .imagesrc已设置,并隐藏 .imagesrc没有设置?

<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>

最佳答案

循环收集 .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>

关于jquery - 设置图像的 src 时显示/隐藏占位符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50166188/

相关文章:

html - 为什么我的标签容器框超出了我的主div?

html - 如何将 Bootstrap 形式的输入与输入组插件对齐?

javascript - 展开折叠树

jquery - 滚动时 Bootstrap 面板的页脚和主体重叠

javascript - 在窗口大小上禁用jQuery函数

javascript - 如何通过<li>标记从javascript函数向图表动态添加值?

CSS 媒体查询在 IE 9 中不起作用

html - 无法解码下载的字体和OTS解析错误:版本标记无效

jquery - 将鼠标悬停在 div 上会更改另一个 div 标题

javascript - 无限滚动动态加载对齐的画廊图像