Question

我对代码很新，但我想知道这个代码应该用什么方向。我将有一个下拉菜单，您可以在其中选择颜色，图像将显示在预览框中。我需要在预览框中同时显示每个color1 color2和color3图像。他们还需要能够在选择其他颜色时进行更改。如果有人能给出一些很棒的方向:)哦，我也在精灵中设置了我的图像

这是我到目前为止的代码：

<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    #preview {
        display: block;
        width: 270px;
        height: 270px;
        border: 1px solid black;
    }

</style>

<div id="preview">
    <img id="image" src="image.png" />
</div>

<form action="" id="opts">
    <label for="color1">Front Color</label>
    <select name="color1" id="color1">
        <option value="white" selected="">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
    <br>
    <label for="color2">Middle Color</label>
    <select name="color2" id="color1">
        <option value="white">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
    <br>
    <label for="color3">Back Color</label>
    <select name="color3" id="color1">
        <option value="white">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
</form>

 <script>

        function setcolor1() {
            var img = document.getElementById("image");
            img.src = this.value;
            return false;
        }
        document.getElementById("color1").onchange = setcolor1;
        }

</script>

Answer 1

我建议您编写JS或jQuery（无论您喜欢哪种）来改变onhover或onclick上的背景颜色，这样您的图像看起来就像用户点击颜色按钮时的颜色不同。按钮改善了用户体验（用户体验），并且比漫步选项列表感觉好多了。

另外

#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}

不适合响应式网页设计/开发

相反，你应该把以下内容：

html
{
width:100%;
}

#preview
{
width:10.5% (this percentage may change depending on how big you want this to cover your page)
max-width:100%;
}

Answer 2

我认为使用jquery你可以解决这个问题。你已经使用相同的id来修改所有选择框。我建议使用像 -

这样的代码

**html**

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<div id="preview">
    <img id="image" src="image.png" />
</div>

<form action="" id="opts">
    <label for="color1">Front Color</label>
    <select name="color1" id="color1">
        <option value="white" selected="">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
    <br>
    <label for="color3">Back Color</label>
    <select name="color3" id="color3">
        <option value="white">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
</form>

**css**
    * { margin: 0; padding: 0; box-sizing: border-box; }
    #preview {
        display: block;
        width: 270px;
        height: 270px;
        border: 1px solid black;
    }
#image{
    width:100px;
}

**jquery**

        $(function(){
            $('#color1').change(function()
            {
                var e = document.getElementById("color1");
                var col = e.options[e.selectedIndex].value;
                $('#preview').css('color', col);
               src='a.png';
                $('#preview img').attr("src", src);
        });
            $('#color3').change(function()
            {
                var e = document.getElementById("color3");
                var col = e.options[e.selectedIndex].value;
                $('#preview').css('background-color', col);
        });

      });

jsfiddle link

下拉以显示图像

2 个答案: