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

本质上，我正在向一个站点添加一些JS，该站点允许相同的按钮组根据ID.WIP中找到的唯一图像加载图像（颜色选项），以说明：

到目前为止，我所做的是：

<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>

现在可以了，但是如果我有很多颜色和很多产品，那么每次添加新产品时都需要进行编码（上面示例中的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英雄卡

---

通过阅读这些论坛，我学到了很多，但现在需要直接帮助！非常感谢您所需要的是设置一个带有参数颜色的函数：

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"/>

这应该可以：

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

---

这里有一把小提琴：

你有两个选择：

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

红色

jsfiddle：

使用参数

黑色

jsfiddle：

加载图像功能如下所示：

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.queryselectoral（“.chair button”）；
对于（变量i=0；i

---

现在，您可以添加

s并指定

数据颜色，其余部分将自行处理。
由于您的站点是Word Press站点，我建议您使用可用的众多插件之一，如

虽然我将是第一个想使用自己的自定义代码的人，但Word Press插件是在Word Press中工作的最佳方式。虽然它看起来是直截了当的，但有很多事情要考虑。例如，如何确定产品是什么以及该产品有哪些图像可用。Javascript是一个客户端库，除非您完全控制网站，否则它不会为您提供产品目录之类的最佳解决方案。
啊，我甚至还没接近！我想我理解您所使用的过程，我想如果没有选择颜色/没有单击按钮，只要有一个Chair_uu.jpg文件（基于您的示例）-仍然会加载？即默认图像。为aerfevre喝彩-看起来很到位，我现在将实现：）在页面加载上，您可能已经设置了默认图像。然后单击，您可以添加所需的任何图像命名规则；）啊，是的，这就是HTML中的内容——在按钮上的Javascript被“触发”之前，任何事情都不会发生。现在明白了，你的第二句话有两个{{一开始，我是否需要在最后再加一个来关闭它？这很好，我添加了另一个功能，并将黑色改为红色-它们都可以工作，只要它们是第一个点击的，我必须重新运行小提琴，让另一个可以工作-我将在一个实时站点上尝试，因为小提琴似乎不喜欢我：）非常感谢你的软件ift response here-出色的支持！我已经更新了我的答案，以更好地满足您的需求，前提是图像路径中确实包含下划线。我还更新了最终使用此解决方案的Fiddle，它似乎在浏览器和设备之间工作得最好。令人烦恼的是，生成的图像在打开时无法在灯箱中缩放或打开这是最初的默认图像-悲伤的时刻，但仍然是一个很好的解决方案。请接受作为您的答案，这样您的问题就不会出现在未回答的页面上。很高兴我能提供帮助。我承认插件在Wordpress上可以很好，但我觉得这是我掌握一个小型Javascript项目并了解更多信息的一小步。我将给插件链接一个机会。至少我希望上面提供的优秀答案能够帮助某些人，也许是使用空白画布，而不是按：P@user2933771我觉得有义务用最好的工具来回应：）每项工作都有一个工具，每种工具都有一个工作；）有趣的是，有这么多的方法来解决这个问题我得到了相似/相同的结果。虽然发布的其他方法对我来说更容易获得我的灵感，但我会尝试在测试站点上实现你的方法，从你所做的努力中学习-为答案干杯！
function loadImage(color) {
    document.querySelector("#image").innerHTML = 
        "/wp-content/uploads/Chair_" + color;
    // Change source of image here by using img.src
}

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