javascript - 将特定图像设置为 Div

Question

我使用 javascript 函数为一个 div 设置了多个图像源。我希望当用户单击按钮时，只有特定的图像设置为该 div。

function changeColor1() {
  document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredwithoutsleeve/red_withoutsleeve.png)"
  document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredhalfsleeveroundneck/red_halfsleeve.png)"
  document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredfullhalf/red_fullhalfsleeve.png)"
  document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredfullsleeve/red_fullsleeve.png)"
  document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredfullsleevev-neck/red_fullsleevevneck.png)"
  document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/coloredshirtsimages/coloredvneck/red_vneck.png)"
}

<div id="myDIV"></div>
<button style="background-color:red;outline:none" class="colors" onclick="changeColor1()"></button>

#myDIV {
    width: 550px;
    height: 650px;
    background-image: url(coloredshirtsimages/coloredhalfsleeveroundneck/white_halfsleeve.png);
    border: 2px solid black;
    color: orange;
    float: right;
    margin-top: 200px;
    background-repeat: no-repeat;
}

我使用 css 和 javascript 更改了图像，现在图像属于特定类别，例如(white_vneck)转到 div，但问题是只有一张图像转到 div。我希望当我单击按钮代替white_vneck 时，其他图像(red_vneck.png)转到div。 如果您有任何疑问，请随时提问

Answer 1

将参数传递给您的函数以帮助它了解您希望显示的图像:

    onclick="changeColor1('abc.png')"


    function changeColor1(pic) {
      document.getElementById("myDIV").style = "background-image:url(" + pic + ")";
    }

根据您的代码片段:

function changeColor1(pngName) {
  document.getElementById("myDIV").style = "background-image:url("+pngName+")";
}

<div id="myDIV"></div>
<button style="background-color:red;outline:none" class="colors" onclick="changeColor1('coloredshirtsimages/coloredwithoutsleeve/red_withoutsleeve.png')"></button>

选择随机图像:

    onclick="changeColor1()"

    var pics =[
                    'coloredwithoutsleeve/red_withoutsleeve.png' , 
                    'coloredhalfsleeveroundneck/red_halfsleeve.png', 
                    'coloredfullhalf/red_fullhalfsleeve.png',
                    'coloredfullsleeve/red_fullsleeve.png',
                    'coloredfullsleevev-neck/red_fullsleevevneck.png',
                    'coloredshirtsimages/coloredvneck/red_vneck.png'
            ];
    function changeColor1() {
        //random selection of pic
        var picIndex = Math.floor(Math.random() * pics.length);
        document.getElementById("myDIV").style = "background-image:url(coloredshirtsimages/" + pics[picIndex] + ")";
    }