基于URL切换imageDiv背景图片失效问题求助

问题描述 #

需根据当前URL是否包含"men"或"women"字符串，为#imageDiv切换背景图片。目前URL判断逻辑正常（弹窗可触发），但背景图片未按预期切换，代码加载在页面底部。

原代码 #

JavaScript #

var redirectURL = decodeURIComponent(window.location.href);
if (redirectURL.includes("men")) {
  alert('Mens');
  $('#imageDiv').css("background", "url('https://mydomainname.com/wp-content/uploads/2023/04/STORE2.png')");  
} 
else if (redirectURL.includes("women")) {
  alert('Womens');  
  $('#imageDiv').css("background", "url('https://mydomainname.com/wp-content/uploads/2023/04/STORE.png')");     
}

CSS #

#imageDiv{
  background: url(https://mydomainname.com/wp-content/uploads/2023/04/compressed-Recovered.png);
    width: 100px;
    height: 100px;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imageDiv"></div>

解决方案 #

原代码直接通过jQuery修改background属性，可能因样式优先级、路径引号解析等问题失效。改用自定义数据属性+CSS属性选择器的方式更可靠：

修改后的JavaScript #

var redirectURL = decodeURIComponent(window.location.href);
if (redirectURL.includes("men")) {
  const imageDiv = document.getElementById('imageDiv');
  imageDiv.dataset.style = "men";
} 
else if (redirectURL.includes("women")) {
  const imageDiv = document.getElementById('imageDiv');
  imageDiv.dataset.style = "women";
}

补充对应的CSS规则 #

需在原有CSS基础上添加以下规则，通过数据属性匹配设置背景图：

#imageDiv[data-style="men"] {
  background: url('https://mydomainname.com/wp-content/uploads/2023/04/STORE2.png');
}

#imageDiv[data-style="women"] {
  background: url('https://mydomainname.com/wp-content/uploads/2023/04/STORE.png');
}

说明 #

• 数据属性data-style的方式将样式逻辑与JS逻辑分离，避免直接操作内联样式可能带来的优先级冲突。
• 弹窗正常触发说明URL判断逻辑无误，核心问题出在样式设置的可靠性上，改用CSS属性选择器能更稳定地覆盖默认样式。

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