javascript 基于redirect_to URL更改图像

fzsnzjdm 于 2023-05-21 发布在 Java

关注(0)|答案(4)|浏览(119)

我只是把整个问题都去掉了，这样我就可以从头开始了。

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')");     
}

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

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

这不是按预期工作。警报显示正常，但图像没有变化。这是加载在我的页面底部。
答：

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";
   
}

JavaScript

来源：https://stackoverflow.com/questions/76283598/change-image-based-on-redirect-to-url

4条答案

按热度按时间

70gysomp1#

我会考虑避免解析路径，除非你必须这样做。下面的内容是否如预期的那样工作？

`if (window.location.pathname.includes('women')) {
    image.src = 'women-url';
} else {
    image.src = 'men-url';
}`

赞(0）回复(0）举报 2023-05-21

at0kjp5o2#

我会做得有点不同。看看下面的代码：

// Get the redirect URL from the current page
var redirectURL = decodeURIComponent(window.location.href);

// Check if the redirect URL contains "mens"
if (redirectURL.includes("mens")) {
  // Show image a
  $("#logo").attr('src', 'path_to_image_a');
} 
// Check if the redirect URL contains "womens"
else if (redirectURL.includes("womens")) {
  // Show image b
  $("#logo").attr('src', 'path_to_image_b');
}

在上面的代码中，我们使用jQuery通过$（“#logo”）选择ID为“logo”的图像元素。然后，我们根据重定向URL使用attr（）函数更新所选图像的src属性。
将'path_to_image_a'和'path_to_image_B'替换为图像的实际路径。此外，确保HTML包含ID为“logo”(<img id="logo" src="">)的图像标记。

赞(0）回复(0）举报 2023-05-21

axr492tv3#

看到你的问题，我想到了下面的解决办法
在html中

<div id='banner'>...<div/>

在CSS中

#banner[data-selection='womans'] {
  background: url(...)
}

#banner[data-selection='mans'] {
  background: url(...)
}

在JavaScript中

const ctrlText = window.location.pathname.includes('womens');
const banner = document.getElementById('banner');
if (ctrlText) {
  banner.dataset.selection = ctrlText.toLowerCase();
} else {
  banner.dataset.selection = 'mens';
}

尽管就个人而言，只要你能，如果默认的div或img在后端的布局中被操纵会更好。

赞(0）回复(0）举报 2023-05-21

tmb3ates4#

您可以使用数据属性来存储要引用的“样式”。然后使用CSS选择器来定位数据属性。你也会想从搜索女人开始，因为女人包括男人这个词。
因此，如果URL包含女性，搜索男性仍然会返回true。

const imageDiv = document.getElementById('imageDiv');
imageDiv.dataset.style = (window.location.pathname.includes('womens')) ? "womens" : "mens"

#imageDiv{height:300px;}

#imageDiv[data-style='womens'] {
  background: url('https://fakeimg.pl/600x400?text=WOMEN')
}

#imageDiv[data-style='mens'] {
  background: url('https://fakeimg.pl/600x400?text=MEN')
}

<div id='imageDiv'><div/>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 基于redirect_to URL更改图像

4条答案

相关问题

热门标签

最新问答