如何在.image的src设置时隐藏.placeholder，未设置时隐藏.image？

嘿，我来帮你搞定这个图片占位符和实际图片的切换显示需求！下面给你两种实现方案，适配不同的场景：

既然你已经引入了jQuery，我们可以利用它的DOM操作能力快速实现需求：

$(document).ready(function() {
  // 遍历所有的.image元素，处理对应的占位符
  $('.image').each(function() {
    const $currentImage = $(this);
    const $placeholder = $currentImage.siblings('.placeholder');
    
    // 检查image的src是否存在且不为空字符串
    if ($currentImage.attr('src') && $currentImage.attr('src').trim() !== '') {
      // 有有效src时，隐藏占位符，显示实际图片
      $placeholder.hide();
      $currentImage.show();
    } else {
      // 无有效src时，隐藏实际图片，显示占位符
      $currentImage.hide();
      $placeholder.show();
    }
  });
});

代码说明： #

• 我们在DOM完全加载后执行逻辑，避免操作还未渲染的元素
• 遍历每个.image元素，找到它的兄弟元素.placeholder（对应你HTML里的结构）
• 通过判断src属性是否存在且非空，来切换两个元素的显示状态

如果之后你不想依赖jQuery了，用原生JS也能轻松实现：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有的.image元素
  const imageElements = document.querySelectorAll('.image');
  
  imageElements.forEach(image => {
    // 找到当前image对应的placeholder（用父元素查找更稳妥，避免兄弟元素顺序变化的问题）
    const placeholder = image.parentElement.querySelector('.placeholder');
    
    // 检查src是否有效（排除空字符串和默认的about:blank）
    if (image.src && image.src.trim() !== '' && image.src !== 'about:blank') {
      placeholder.style.display = 'none';
      image.style.display = 'block'; // 根据你的布局调整显示方式，比如inline-block
    } else {
      image.style.display = 'none';
      placeholder.style.display = 'block';
    }
  });
});

额外提示：动态修改src时的处理 #

如果你的图片是动态加载的（比如后期通过JS设置src），可以把判断逻辑封装成一个函数，方便随时调用：

// jQuery版本的封装函数
function toggleImageDisplay($image) {
  const $placeholder = $image.siblings('.placeholder');
  if ($image.attr('src') && $image.attr('src').trim() !== '') {
    $placeholder.hide();
    $image.show();
  } else {
    $image.hide();
    $placeholder.show();
  }
}

// 动态设置src后调用示例
$('.image').attr('src', 'your-new-image-url.jpg');
toggleImageDisplay($('.image'));

内容的提问来源于stack exchange，提问作者Kyle Underhill