Question

基本上我是在一个网站上添加一些JS，它允许同一组按钮根据ID中的唯一图像加载图像（颜色选项）。 WIP用于说明： http://www.twistfurniture.co/collections/product-test/

所以我到目前为止做了什么：

<div id="switchgallery">
<img src="/wp-content/uploads/Chair.jpg" id="switchimage">
</div>

<p>        
<input id="Button1" type="button" value="Show black" onclick="ShowBlack()"/>
&nbsp;&nbsp; 
<input id="Button2" type="button" value="Show red" onclick="ShowRed()"/>
</p>

JS

function ShowBlack() 
{document.getElementById("switchimage").src = "/wp-content/uploads/Chair_Black.jpg";}

function ShowRed() 
{document.getElementById("switchimage").src = "/wp-content/uploads/Chair_Red.jpg";}

现在这样可行，但如果我有很多颜色和很多产品，那么每次添加新产品时都要花费很长时间并且需要编码（在上面的例子中，productname = Chair）。

我想要完成的是以下内容。

function ShowBlack() 
{document.getElementById("switchimage").src = "***Dynamically generate the SRC of the image based on the ID of switchimage and and add _Black before the file extension =(/wp-content/uploads/Chair_Black.jpg)***";}

这样我就可以添加很多产品，只要它们有正确的ID并且按钮在页面上我就会得到一种简单的方法来切换它们的颜色（假设我已经在正确的目录中上传了相应命名的文件） ; d）

就像我提到的那样，这是一项正在进行中的工作，我会继续捣鼓，直到我自己解决这个问题或者你们翻过ICT Hero卡。

我通过阅读这些论坛了解了很多，但现在需要直接帮助！非常感谢提前

Answer 1

您需要的是使用参数颜色设置函数：

function showImage(color) {
    document.getElementById("switchimage").src = "/wp-content/uploads/Chair_"+color+".jpg";
}

这种颜色很容易成为您使用类似

功能加载的按钮的参数

function showImage() {
{
     var color = jQuery(this).attr("color");
     document.getElementById("switchimage").src = "/wp-content/uploads/Chair_"+color+".jpg";
}

按钮定义如

<input id="Button1" type="button" value="Show black" onclick="showImage()" color="black"/>

Answer 2

这应该有效：

function ShowBlack() 
{
  source = document.getElementById("switchimage").src;
  if (source.lastIndexOf("_") != -1){
    source = source.substring(0,source.lastIndexOf("_"));
  }else{
    source = source.substring(0,source.lastIndexOf("."));
  }
  source += "_Black.jpg"
  console.log(source);
  document.getElementById("switchimage").src = source;
}

function ShowRed() 
{
  source = document.getElementById("switchimage").src;
  if (source.lastIndexOf("_") != -1){
    source = source.substring(0,source.lastIndexOf("_"));
  }
  else{
    source = source.substring(0,source.lastIndexOf("."));
  }
  source += "_Red.jpg"
  document.getElementById("switchimage").src = source;
}

这是一个小提琴：http://jsfiddle.net/TQhJk/1/

Answer 3

您有几个选择：

使用数据。您可以使用data属性存储要加载的颜色。

<button data-color="Red">Red</button>

jsfiddle：http://jsfiddle.net/PThwj/
使用参数

<button onlick="loadImage('black');">Black</button>

jsfiddle：http://jsfiddle.net/gt6BS/1/

加载图像功能如下所示：

function loadImage(color) {
    document.querySelector("#image").innerHTML = 
        "/wp-content/uploads/Chair_" + color;
    // Change source of image here by using img.src
}

要动态绑定事件（如果使用选项1），请执行以下操作：

var buttons = document.querySelectorAll(".chair-button");
for (var i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener("click", loadImageEvent);
}

现在您可以添加<button>并指定data-color，其余的将自行处理。

Answer 4

由于您的网站是Word Press网站，我建议您使用众多可用插件之一，例如this。

虽然我是第一个想要使用我自己的自定义代码的人，但Word Press插件是在Word Press中工作的最佳方式。虽然看起来很简单，但还有很多事情需要考虑。例如，如何确定产品是什么以及可用于所述产品的图像。 Javascript是一个客户端库，除非您完全控制该站点，否则不会为产品目录提供最佳解决方案。

带有动态img src的JS / HTML图像转换器

4 个答案: