如何根据预设逻辑条件修改HTML轮播组件的图片src属性

实现说明 #

• 仅需判断第一个图片含Blank且第二个图片不含Blank的场景，交换轮播列表项的顺序即可，其余场景均符合需求无需额外处理
• 推荐使用querySelector直接获取单个DOM节点，避免getElementsByClassName返回类数组需要额外取下标的问题
• 仅调整DOM节点顺序，不会修改原有图片src值，符合变量控制图片内容的要求

完整代码 #

HTML 部分（原有结构无需修改） #

<div class="slider-one">        
<ul class="bxslider1">
   <li><img class="bximg1" src=""></li>
  <li><img class="bximg2" src=""></li>
</ul>
</div>

JavaScript 部分 #

// 等待DOM完全加载后执行逻辑，避免节点未渲染导致的报错
document.addEventListener('DOMContentLoaded', function() {
  // 获取对应DOM节点
  const img1 = document.querySelector('.bximg1');
  const img2 = document.querySelector('.bximg2');
  const sliderList = document.querySelector('.bxslider1');
  const listItem1 = img1.parentElement;
  const listItem2 = img2.parentElement;

  // 校验src是否包含Blank
  const hasBlank1 = img1.src.includes('Blank');
  const hasBlank2 = img2.src.includes('Blank');

  // 仅第一张含Blank、第二张不含时交换顺序，符合优先展示第二张的要求
  if (hasBlank1 && !hasBlank2) {
    sliderList.insertBefore(listItem2, listItem1);
  }
})

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