在 javascript 中编码的更有效方法

Question

I am building a watch customizer for school, im pretty new to javascript, this code works but its lengthy, and i will need to add a lot more colours. is there a more efficient way to code this?

each color change is being called from buttons if that helps.

thanks for any help in advance.

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

Consider a more generic approach

Since all of your calls seem to do the same thing: target an image and set the source for it, you could likely refactor this out into a single function :

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

This would allow you to just specific the id of the element that you are targeting and then the path for your given image :

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

Answer 2

You need to pass arguments to the function to make it more reusable/modular.

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

Then you can call ChangeHands('rosegold.png')

You can do this for each of the functions, ChangeFace, ChangeHands, ChangeFrame, and ChangeStraps. Cheers and great question!

Answer 3

If you're using 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');

Otherwise (if you're not using es2015) you can replace the functions to be something like this:

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

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

Or just concatenate string with '+' operand.

This approach tries to have smaller functions and ensures that each has a single responsibility.

Answer 4

StackOverflow isn't a good place for such questions, because it could be solved in infinite different ways. But, here you are, this is how I would do it:

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 is a string with id of object you want to change. You create array with all paths of images you want to use. Then you can create toWhat variable to specify which one do you want to use calling change function.

Answer 5

For next level strats crate and array of all your conditions and loop through it.

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 6

arraies and cycles

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

Answer 7

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

usage:

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

Should work, I think.