컬러 버튼 클릭시 이미지 변경

Question

나는 그의 사이트에서 친구를 돕고 있으며 특정 컬러 버튼 클릭에 대한 이미지를 변경할 수 있기를 원합니다. 데이터 컬러로 작업하고 속성을 얻으려고했습니다. 검사하지만 대부분 작동하지 않으며 하드 코드로 모든 단일 색상에 대해 각각의 검사를 수행하는 잘못된 코드 집합을 만들었습니다. 한 가지 기능으로이 작업을 수행 할 수 있는지 쉽게 알고 싶습니다. 내가하고있는 것보다 atm 하하!

코드 :

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

그리고 자바 스크립트

에 대한

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

: 여기 은 내가

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

그리고 여기에 내가 이미지로 교체 색상과 체크를 선택하도록 요청 코드와 js 바이올린, 그것은 거기에 전혀 작동하지 않습니다 그래서 나는 거 대 한 경우 kwow하지 않습니다. lp ...이 문제에 많은 노력을 기울인 사람들에게 미안합니다. 거대한 감사! 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()">).