javascriptでこれをコード化するより効率的な方法

Question

私は学校用の時計カスタマイズツールをビルドしています。私はかなりjavascriptに新しいですが、このコードは長持ちしており、もっと色を追加する必要があります。これをコード化するより効率的な方法はありますか？

ボタンから各色の変更が呼び出されています。

ご協力いただきありがとうございます。

///////////////////////////////////////// Face 
    function ChangeFaceRG() 
    { 
    document.getElementById('face').src = "parts/faces/face roesGold.png"; 
    }; 
function ChangeFaceG() 
    { 
    document.getElementById('face').src = "parts/faces/face gold.png"; 
    }; 
function ChangeFaceS() 
    { 
    document.getElementById('face').src = "parts/faces/face silver.png"; 
    }; 
///////////////////////////////////////// Frame 
    function ChangeFrameRG() 
    { 
    document.getElementById('frame').src = "parts/frames/frame rosegold.png"; 
    }; 
function ChangeFrameG() 
    { 
    document.getElementById('frame').src = "parts/frames/frame gold.png"; 
    }; 
function ChangeFrameS() 
    { 
    document.getElementById('frame').src = "parts/frames/frame silver.png"; 
    }; 

    //////////////////////// Hands 
    function ChangeHandsRG() 
    { 
    document.getElementById('hands').src = "parts/hands/hands rose gold.png"; 
    }; 
function ChangeHandsG() 
    { 
    document.getElementById('hands').src = "parts/hands/hands gold.png"; 
    }; 
function ChangeHandsS() 
    { 
    document.getElementById('hands').src = "parts/hands/hands silver.png"; 
    }; 
////////////////////////////////////////// straps 
    function ChangeStrapsRG() 
    { 
    document.getElementById('straps').src = "parts/straps/straps rose gold.png"; 
    }; 
function ChangeStrapsG() 
    { 
    document.getElementById('straps').src = "parts/straps/straps gold.png"; 
    }; 
function ChangeStrapsS() 
    { 
    document.getElementById('straps').src = "parts/straps/straps silver.png"; 
    }; 

Answer 1

function Change(folder, part, color) { 
    document.getElementById(part).src = "part/" + folder + "/" + part + " " + color + ".png" ; 
} 

用法：

Change('hands', 'hand', 'rose gold'); 
Change('frames', 'frame', 'silver'); 
Change('straps', 'strap', 'gold'); 
Change('faces', 'face', 'silver'); 

は、私が思うに、動作するはずです。

Answer 2

あなたの呼び出しのすべてが同じことを行うように見えるので、より一般的なアプローチ

を考えてみましょう：画像を対象とし、それのソースを設定し、あなたはおそらく、単一の関数にこれをリファクタリングでき：

function SetImage(id, imgSrc) { 
    // Find the image by it's `id` attribute and then set the source for that image 
    document.getElementById(id).src = imageSrc; 
} 

これは、あなたがターゲットとしている要素と、あなたの指定した画像のパスのidあなただけ特定できるようになる：

<!-- Example usage --> 
<button onclick='SetImage("face","parts/faces/face roesGold.png")'>Change Face</button> 

Answer 3

関数をより再利用/モジュール化するためには、関数に引数を渡す必要があります。

function ChangeHands(type) { 
    document.getElementById('hands').src = `parts/hands/hands${type}.png` 
} 

次に、あなたはあなたが、機能ごとにChangeFace、ChangeHands、ChangeFrame、およびChangeStrapsこれを行うことができますChangeHands('rosegold.png')

を呼び出すことができます。乾杯と大きな質問！

Answer 4

あなたはes2015使用している場合：

function getPath (type, color) { 
    return ['parts/', type, ' ', color, '.png'].join(''); 
} 

function change (type, color) { 
    document.getElementById(type).src = getPath(CONFIG.type, color); 
} 

それとも単なる文字列を連結します。それ以外の場合は

// Config object, here you create a map between the id and the path 
const CONFIG = { 
    face: 'faces/face', 
    frame: 'frames/frame', 
    hands: 'hands/hands', 
    straps: 'straps/straps' 
} 

// Get the correct path based on the provided type and color 
const getPath = (type, color) => `parts/${type} ${color}.png`; 

// Apply transformation with the path obtained from the `getPath` function 
const change = function (type, color) { 
    document.getElementById(type).src = getPath(CONFIG.type, color); 
} 

// Example usage: 
change('face', 'roseGold'); 

を（あなたはes2015を使用していない場合）は、このようなものにするための機能を置き換えることができます'+'オペランドを使用します。

このアプローチでは、より小さい関数を試し、それぞれが単一の責任を持つことを保証します。

Answer 5

StackOverflowは無限のさまざまな方法で解決できるため、このような質問には適していません。しかし、ここにあなたがいる、これは私がそれを行うだろうかです：

var arrayWithPaths = [ 
    "parts/hands/hands silver.png", 
    "parts/straps/straps rose gold.png", 
    //and all other paths here 
]; 

function change(what, toWhat){ 
    document.getElementById(what+'').src = arrayWithPaths[toWhat]; 
} 

what変更したいオブジェクトのIDを持つ文字列です。使用するイメージのすべてのパスを使用して配列を作成します。次に、toWhat変数を作成して、どちらを使用したいのかを指定してchange関数を呼び出すことができます。

Answer 6

あなたのすべての条件の次のレベルのストラットクレートと配列のためにそれをループします。

ids = new arrary [id1, id2, id3, etc]; 
srcs = new arrary [src1, src2, src3, etc]; 
function setImage(id, imgSrc) { 
    document.getElementById(id).src = imageSrc; 
} 
for(i=0; i<ids.length;i++){ 

setImage(id[i], src[i]); 
} 

Answer 7

arraiesとサイクル

var ids = ["face", "frame", "hands", "straps"] 
var colors = ["rose gold", "gold", "silver"] 

ids.forEach(function(id, i, ids) { 
    colors.forEach(function(color, i, colors) { 
      document.getElementById(id).src = "parts/hands/hands " + color +".png"; 
    }); 
});