javascript - 单击彩色按钮更改图像

Question

我正在帮助一个 friend 建立他的网站，他希望能够通过单击某些彩色按钮来更改图像，我已经尝试使用数据颜色并获取属性并进行检查，但它基本上没有工作，作为一个硬修复，我创建了一组错误的代码，我在其中对每种颜色进行每次检查，我想知道是否可以在一个函数中执行此操作，并且比我在 atm 上做的更容易或更容易哈哈!

代码:在这里我要求用户选择一种颜色并勾选

<h2> kies een kleur</h2>
<a href='#' onclick='red()'><div class="red colorChoose" data-color = 'red'> 
</div></a>

我在这里替换图片:

<div class="imageLook"><img alt="image" id="imageReplace" 
src="image location"></div>

对于 Javascript

function red()
{   
    if (document.getElementsByTagName("div")[2].getAttribute("data-color") == "red" ){       
        document.getElementById("imageReplace").src="image location";
    }
}

js 摆弄代码，它在那里根本不起作用，所以我不知道它是否有很大的帮助......对那些在这个问题上付出了很多努力的人感到抱歉。非常感谢! https://jsfiddle.net/ft5b8w9a/

感谢所有的帮助和反馈!

Answer 1

另一种选择是使用文件名代替颜色名称。

var img = document.querySelector( 'img' );
var buttons = document.querySelectorAll( 'button' );

// Use an object as a dictionary to map a color to a filename.
var basePath = 'path/to/img/';


// Add event listener is JS not in the HTML.
for ( var i = 0, len = buttons.length; i < len; i++ ) {

  var btn = buttons[ i ];
  
  btn.addEventListener( 'click', function ( e ) {
    var file = basePath + this.getAttribute( 'data-file' );
    img.src = file;
    img.alt = file;
  } );
  
}

<img src="path/to/img/default.jpg" alt="path/to/img/default.jpg">

<h2>Colors</h2>
<button data-file="apple.jpg">Red</button>
<button data-file="cloud.jpg">White</button>
<button data-file="sky.jpg">Blue</button>

如果出于某种原因你真的想要颜色名称，那么我可能会创建一个“字典”，将颜色选项映射到一个文件。

var img = document.querySelector( 'img' );
var buttons = document.querySelectorAll( 'button' );

// Use an object as a dictionary to map a color to a filename.
var basePath = 'path/to/img/';
var colorToFile = {
  'red': 'apple.jpg',
  'white': 'cloud.jpg',
  'blue': 'sky.jpg'
};

// Add event listener is JS not in the HTML.
for ( var i = 0, len = buttons.length; i < len; i++ ) {

  var btn = buttons[ i ];
  
  btn.addEventListener( 'click', function ( e ) {
    img.src = basePath + colorToFile[ this.getAttribute( 'data-color' ) ];
    img.alt = basePath + colorToFile[ this.getAttribute( 'data-color' ) ];
  } );
  
}

<img src="path/to/img/default.jpg" alt="path/to/img/default.jpg">

<h2>Colors</h2>
<button data-color="red">Red</button>
<button data-color="white">White</button>
<button data-color="blue">Blue</button>

总的来说，如果可以的话，我会避免在 HTML 中添加事件处理程序(即 <a onclick="function()"> )。