0

环顾四周，找不到任何似乎适合我需要的东西。我希望能够将 T 恤的图像更改为一种不同的颜色，具体取决于在下拉菜单中选择的颜色。

这是 DDL：

<select name="Colours" onchange = "changeImage()">
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>

这是我编写的 JS 函数（每个选项都重复 switch 语句）：

           <script type="text/javascript">
               function changeImage(){
                       var x = document.getElementById("Colours").value;
                       switch(x){
                       case "White":
                                  document.Mainimg.src = images/white.jpg;
                                  location.reload();
                                  break;
                       case "Red":
                                 document.Mainimg.src = images/red.jpg;
                                 location.reload();
                                 break;

最后，如果需要，图像的代码：

                <div id="main_img">
                    <img id="Mainimg" name="Mainpic" src=images/white.jpg>
                </div>

这不起作用，当我在列表中选择一个新选项时没有任何反应。我对如何做到这一点有完全错误的想法还是只是一个简单的调整？

谢谢你的帮助。

4

2 回答 2

1

删除location.reload()：当您重新加载页面时，您会丢失所做的更改。您更改src图像的事实足以加载它。

使用 getElementById 获取您的图像并将 URL 放在引号之间：

document.getElementById('Mainimg').src = "images/white.jpg";

只需使用显示编译错误的控制台就可以发现缺少的引号。使用控制台。

于 2013-03-14T18:28:32.917 回答
0

也许你想要做的是：http: //jsfiddle.net/jWbUv/

HTML：

<select name="Colours" onchange = "changeImage(this)">
                    <option value="">please select</option>
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>
 <div id="main_img">
 </div>

JS：

function changeImage(src) {
    var mainImg = document.getElementById('main_img');
    mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')');
}

CSS：

 #main_img {
        width: 100px;
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
    }
于 2013-03-14T18:46:29.500 回答