如何用JavaScript实现点击图片替换src/alt/title属性？代码异常求助

你当前的代码错误地将图片父容器的内容直接替换成了输入的URL，根源是错误操作了父元素的innerHTML，而非直接修改img标签的属性。

错误原因分析 #

• 代码中e.target.parentNode.innerHTML = imgUrl.replace('src=')这类逻辑完全错误：
  1. 直接修改父div的innerHTML会覆盖掉包括img在内的所有子元素
  2. replace('src=')写法无效，replace方法需要两个参数（要替换的内容和替换后的内容），此处用法无意义

修正方案 #

直接操作img元素本身的src、alt、title属性，同时处理用户取消输入（prompt返回null）的情况，避免清空原有属性值。

修正后的完整代码 #

$('.main').on('click', '.element', function(e) {
  console.log('Delete Element? ', isDelete(e, this));
  currentSelected = e.target;
  if (!isDelete(e, this)) {
    if (e.target.tagName === "IMG") {
      let imgUrl = prompt('Enter URL Here');
      let imgAlt = prompt('Enter Alt Text Here');
      let imgTitle = prompt('Enter Title Here');
      
      // 仅当用户输入有效内容（未取消）时才修改对应属性
      if (imgUrl) e.target.src = imgUrl;
      if (imgAlt) e.target.alt = imgAlt;
      if (imgTitle) e.target.title = imgTitle;
    } else if (['h2', 'h3', 'h4', 'h5', 'h6', 'a','p', 'li', 'iframe'].includes(e.target.localName)) {
      if (e.target.localName === 'a') {
        const ctaText = prompt('Enter Call To Action Text');
        if (ctaText) e.target.innerText = `${ctaText} →`;
      } else {
        const text = prompt('Enter Heading Text Here');
        if (text) e.target.innerText = text;
      }
    }
  } else {
    e.target.remove();
  }
  const code = $('.main__layout-content')[0].outerHTML.replace(/"/g, `'`).split('\n').join('');
  setCookie("code", code, 10);
});

关键修改点 #

• 移除对父元素innerHTML的错误赋值，改为直接操作e.target（被点击的img元素）的属性
• 添加prompt返回值判断：避免用户取消输入时清空原有属性
• 统一使用严格相等运算符===，提升代码严谨性

验证效果 #

点击图片后，输入新的URL、alt和title，img标签的对应属性会被正确更新，父div的结构保持不变，不会被替换为纯文本。

内容的提问来源于stack exchange，提问作者Ecommerce Optimizer