Question

（我更新了我的代码以从info2中删除br ）

我想使用jQuery读取JSON文件（它包含颜色名称及其十六进制值）并将颜色名称加载到下拉选项中（我使这部分工作）。然后，当用户更改下拉选择的值时，我希望下拉选项旁边的 div更改为所选颜色。如何将div背景颜色更改为用户选择的颜色的十六进制值？

我的页面：

<script language="javascript" type="text/javascript"> var JSON_Response; $(document).ready(function () { $.getJSON('Colors.json', function (data) { JSON_Response = data; var mySelect = document.getElementById("selColor"); for (i = 0; i < JSON_Response.Colors.length; i++) { var myOption = document.createElement("option"); myOption.text = JSON_Response.Colors[i].colorName; myOption.value = i; try { mySelect.add(myOption, mySelect.options[null]); } catch (e) { mySelect.add(myOption, null); } } }); $("#selColor").change(function () { var myIndex = $("#selColor").val(); $("#showColor").attr("src", JSON_Response.Colors[myIndex].hex); var info = JSON_Response.Colors[myIndex].colorName + "<br />"; info += JSON_Response.Colors[myIndex].hex+ "<br />"; var info2 = JSON_Response.Colors[myIndex].hex; $("#divDisplay").html(info).css({'background-color' : '#' + info2}); }); }); </script>

Answer 1

请勿将<br />附加到info2，因为它应该只包含颜色代码。

var info2 = JSON_Response.Colors[myIndex].hex;

Answer 2

你基本上拥有它。错误位于您为div设置的背景颜色值。

$("#divDisplay").html(info).css({'background-color' : '#' + info2});

应该阅读

$("#divDisplay").html(info).css({'background-color' : '#' + JSON_Response.Colors[myIndex].hex});

Basic working fiddle example

<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <button>Click me</button><br/>
    <div id="myDiv" style="height:400px;width:400px;">
    </div>

    <script>
    var hexChars = "ABCDEF0123456789";

    function getColor() {
        var colorStr = "";

        for(var idx=0; idx < 6; idx++ ) {
                colorStr += hexChars.charAt(Math.floor(Math.random() * hexChars.length));
        }

        return colorStr;
    }

    $('document').ready(function() {
        $('button').click(function() {
            var rand = getColor();

            $('#myDiv').html('#' + rand).css({ 'background-color' : '#' + rand });
        });
    });
    </script>
</body>
</html>

使用存储在json文件中的HEX值更改Div背景颜色

2 个答案: