более эффективный способ закодировать это в 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` 
} 

Тогда вы можете позвонить ChangeHands('rosegold.png')

Вы можете сделать это для каждой из функций, ChangeFace, ChangeHands, ChangeFrame и ChangeStraps. Приветствия и большой вопрос!

Answer 4

Если вы используете es2015:

// 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) вы можете заменить функции быть что-то вроде этого:

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

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

Или просто сцепить строки с операндом '+'.

Этот подход старается иметь меньшие функции и гарантирует, что каждая из них несет отдельную ответственность.

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 является строка с идентификатором объекта, который вы хотите изменить. Вы создаете массив со всеми путями изображений, которые хотите использовать. Затем вы можете создать переменную 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"; 
    }); 
});