Question

我正在通过他的网站帮助一个朋友，他希望能够通过点击某些彩色按钮来更改图像，我尝试使用数据颜色并获取属性并检查但是它主要不会工作和作为一个硬件修复我创建了一组错误的代码，我在每个颜色的每个检查功能，我想知道是否可以在一个功能中执行此操作，并且比我在做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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

总的来说，如果你可以提供帮助，我会避免在HTML中添加事件处理程序（例如<a onclick="function()">）。

点击彩色按钮更改图像

1 个答案: