JavaScript如何根据变量值动态显示对应图片？已实现>12显图，>20换图试else无效

你之前使用else分支无法实现预期效果，本质是两个共性代码问题导致的：

• 条件判断顺序逻辑倒置：如果把poeng >12的判断放在分支最前面，那么数值超过20的场景会直接命中这个基础分支，后续判断poeng>20的代码永远不会被执行
• 原图片插入逻辑未做去重处理：每次check函数命中条件就会新建DOM元素追加到页面，多次触发条件会造成同类型图片堆叠显示

逻辑调整规则 #

按照从高阈值到低阈值的顺序编写条件分支，保证大区间先被匹配，避免分支穿透：

• 第一优先级判断poeng > 20：命中则加载高阈值区间对应的第二张图片
• 第二优先级判断poeng > 12：覆盖12 < poeng ≤20的区间，加载原有第一幅图片
• 其余阈值区间：不加载任何图片

同时优化DOM操作逻辑，提前缓存图片元素占位，避免每次判断都重复新建节点。

修改后的完整代码 #

var poeng = 0;
// 拆分两个区间对应的图片地址，替换为你要展示的第二张图链接即可
var imgURLMid = 'https://partycity6.scene7.com/is/image/PartyCity/_pdp_sq_?$_1000x1000_$&$product=PartyCity/278696';
var imgURLHigh = '替换为poeng超过20时要展示的图片地址';
// 全局缓存图片DOM节点，避免重复创建
let cachedImg = null;

function createImage(url) {
  var imgEl = document.createElement('img');
  imgEl.alt = 'Nerd';
  imgEl.src = url;
  return imgEl;
}

function myFunction() {
  poeng = 5;
  console.log(poeng)
  check()
}

function myFunction2() {
  poeng = 7;
  console.log(poeng)
  check()
}

function myFunction3() {
  poeng = poeng + 5;
  console.log(poeng)
  check()
}

function check() {
  let currentTargetURL = '';
  // 从高到低判断阈值，避免分支穿透
  if (poeng > 20) {
    currentTargetURL = imgURLHigh;
  } else if (poeng > 12) {
    currentTargetURL = imgURLMid;
  }

  // 无匹配图片地址时，清除页面已有的图片占位
  if (!currentTargetURL) {
    if (cachedImg) {
      cachedImg.remove();
      cachedImg = null;
    }
    return;
  }

  // 已有缓存的图片元素时，直接替换src，减少DOM操作
  if (cachedImg) {
    cachedImg.src = currentTargetURL;
  } else {
    cachedImg = createImage(currentTargetURL);
    document.body.appendChild(cachedImg);
  }
}
poeng = 24
check()

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