カラーボタンをクリックすると画像が切り替わります

Question

私は自分のサイトで友人を手伝っています。特定の色のボタンのクリックで画像を変更したいと思っています。私はデータカラーで作業してみました。チェックしても機能しませんが、ほとんどの場合は機能しません。また、ハード・フィックスとして、単色ごとにチェックを行うコードを作成しました。これを1つの関数で簡単に実行できるかどうかを知りたい私はそれをやっているよりも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コードでは、それはすべてで動作しませんので、私はそれが巨大であれば私はkwowしないlp ...この問題に多大な努力をしてくれた人には申し訳ありません。大変ありがとう！ https://jsfiddle.net/ft5b8w9a/

ご協力ありがとうございました！

Answer 1

もう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()">）を避けるだろう。