JS切换预订产品房型图时HTML集合最后一个元素未定义问题

问题排查与修复方案 #

你有3个核心疏漏导致运行异常：

• 元素获取时机错误
  WooCommerce产品图库的.zoomImg元素是前端图库插件动态生成的，你当前的脚本在DOM未完全加载、图库插件未初始化完成时就执行了，此时.woocommerce-product-gallery__image的子元素只有第0位的<a>标签，第1位的zoomImg还未生成，自然获取到的zoompic为undefined。
• 属性拼写错误
  你代码里写的zoompic.scr属于拼写错误，图片地址的正确属性名是src，就算你成功获取到zoompic元素，这行代码也会赋值失败。
• 节点选择不严谨
  firstChild会匹配空格、换行等文本节点，你当前能拿到img元素属于巧合，一旦DOM结构有微小变动就会直接报错。

修复后的代码 #

<script id="bookingschanges">
// 等待页面所有资源加载、图库初始化完成后再执行逻辑
window.addEventListener('load', function() {
  const activities = document.getElementById("wc_bookings_field_resource");
  // 用更严谨的选择器定位元素
  const galleryItem = document.querySelector(".woocommerce-product-gallery__image");
  const image = galleryItem.querySelector('img');
  const zoompic = galleryItem.querySelector('.zoomImg');

  activities.addEventListener("change", function() {
    if(this.value == "1949") {
      const targetImgUrl = "https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg";
      image.src = targetImgUrl;
      image.srcset = "";
      // 修正属性拼写错误
      zoompic.src = targetImgUrl;
    }
    console.log(image);     
    console.log(zoompic);
  });
});
</script>

可选优化方案 #

如果后续需要适配多个房型的图片切换，可以把所有房型ID和对应图片地址存在对象中，避免写多层if判断：

const roomImgMap = {
  '1949': 'https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg',
  '其他房型ID': '对应图片地址'
}
// change事件内直接取值即可
const targetImg = roomImgMap[this.value];
if(targetImg) {
  // 执行赋值逻辑
}

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