Question

我有一个戴帽子的人的照片。我在这个图像上有“master.png”帽子（单独）的图像，每当用户点击下面的不同颜色样本时，它将变为不同的图像（相同的帽子/不同的颜色）。

javascript函数有效但我无法将颜色变量值分配给我的样本。因此，无论您单击哪个样本，都只会显示列出的最后一个js src图像。我也不确定我的javascript变量代码是否正确。

我无法在网上找到有关如何执行此操作的任何内容。请帮忙！

以下是代码：

<script type="text/javascript">
function hat(color)
{
var color = ['redhat', 'bluehat', 'blackhat'];
document.getElementById("master").src="images/redhat.png"; 
document.getElementById("master").src="images/bluehat.png"; 
document.getElementById("master").src="images/blackhat.png"; 
}
</script>



<img id="hat" src="images/manwearinghat.png" width="100%" class="center">


<img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">




<img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');" value="redhat" style="z-index:3">


<img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');" value="bluehat" style="z-index:3">


<img src="images/swatchs/blackhat.png" width="69" height="69
" onclick="hat('blackhat');" style="z-index:3">

Answer 1

你可以使用像这样简单的东西：

function hat(color) {
    document.getElementById("master").src = "images/" + color + ".png"; 
}

Answer 2

由于您已经传递了颜色的名称，所以您需要做的就是

  function hat(color) {
    document.getElementById("master").src = "images/" +color+".png";
}

更改图片。

Answer 3

这段代码不是很紧凑，但它会起作用。 HTML：

    <img id="hat" src="images/manwearinghat.png" width="100%" class="center">
    <div id="master"></div>
    <div>
        <img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');"    
     value="redhat" style="z-index:3">


    <img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');"
    value="bluehat" style="z-index:3">


    <img src="images/swatchs/blackhat.png" width="69" height="69
    " onclick="hat('blackhat');" style="z-index:3">
    </div>

使用Javascript：

    function hat(color){
        if (color == 'bluehat'){
            document.getElementById('picture').innerHTML=<img id="master" 
    src="images/bluehat.png" width="100%" alt=" " name="master">
        if (color == 'blackhat'){
            document.getElementById('picture').innerHTML=<img id="master"
    src="images/blackhat.png" width="100%" alt=" " name="master">

        if (color == 'redhat'){
            document.getElementById('picture').innerHTML=<img id="master" src="images/redhat.png"
    width="100%" alt=" " name="master">
    };

如何将getElementbyId变量分配给html代码

3 个答案: