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

您需要将参数传递给函数，以使其更具可重用性/模块化。

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

然后你可以拨打ChangeHands('rosegold.png')

您可以为每个功能，ChangeFace，ChangeHands，ChangeFrame和ChangeStraps执行此操作。干杯和好问题！

Answer 3

如果你正在使用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);
}

或者只是将字符串连接到＆＃39; +＆＃39;操作数。

这种方法试图拥有更小的功能，并确保每个人都有一个责任。

Answer 4

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 5

对于下一级战斗箱和所有条件的数组并循环通过它。

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

用法：

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

我认为应该有效。

在javascript中编写代码的更有效方法

7 个答案: