使用多个按钮和 javascript 更改图像答案

【问题标题】：Change image using multiple button and javascript使用多个按钮和 javascript 更改图像
【发布时间】：2017-07-15 11:50:44
【问题描述】：

我有来自另一个 stackoverflow 问题的代码来使用多个 SELECT 和 javascript 更改图像：

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var color = document.getElementById("colour").value;
    var size = document.getElementById("size").value;

    image.src = "img/" + size + "_" + color;
};

<img id="imageToSwap" src="img/red.png">

<select id="colour" onChange="swapImage()">
    <option value="red.png">Red</option>
    <option value="green.png">Green</option>
</select>

<select id="size" onChange="swapImage()">
    <option value="small">Small</option>
    <option value="large">Large</option>
</select>

那么，如何将 SELECT 更改为 BUTTON？

例如：

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var color = document.getElementById("colour").value;
    var size = document.getElementById("size").value;

    image.src = "img/" + size + "_" + color;
};

<img id="imageToSwap" src="img/red.png">

<div id="colour" onChange="swapImage()">
  <button value="red.png">Red</button>
  <button value="green.png">Green</button>
</div>

<div id="size" onChange="swapImage()">
  <button value="small">Small</button>
  <button value="large">Large</button>
</div>

【问题讨论】：

标签： javascript image button

【解决方案1】：

你可以像下面那样做。它工作正常，对初学者来说不太稳定。

var color = 'Red';
var size = 'Green';

function changeColor(newColor) {
    color = newColor;
    updateImage();
}

function changeSize(newSize) {
    size = newSize;
    updateImage();
}

function updateImage(){
    var image = document.getElementById("imageToSwap");
    image.src = "img/" + size + "_" + color;
};

<img id="imageToSwap" src="img/red.png">

<div>
  <button value="red.png" onClick="changeColor('Red')">Red</button>
  <button value="green.png" onClick="changeColor('Green')">Green</button>
</div>

<div>
  <button value="small" onClick="changeSize('Small')">Small</button>
  <button value="large" onClick="changeSize('Large')">Large</button>
</div>

【讨论】：

非常感谢！！

【解决方案2】：

你可以通过按钮实现同样的事情

这里我调用了每个按钮的函数onclick。这些按钮位于div 内部，ID 为colour 和size。以id的属性为颜色和大小改变

var color = 'red.png';//default values
var size = 'small';//default values

function swapImage(obj) {
  var image = document.getElementById("imageToSwap");


  if (obj.parentElement.getAttribute('id') == "colour") {
    color = obj.getAttribute('value')
  }
  if (obj.parentElement.getAttribute('id') == "size") {
    size = obj.getAttribute('value')
  }


  image.src = "img/" + size + "_" + color;
};

<img id="imageToSwap" src="img/red.png">

<div id="colour">
  <button value="red.png" onclick="swapImage(this)">Red</button>
  <button value="green.png" onclick="swapImage(this)">Green</button>
</div>

<div id="size">
  <button value="small" onclick="swapImage(this)">Small</button>
  <button value="large" onclick="swapImage(this)">Large</button>
</div>

【讨论】：

非常感谢！！