Question

我需要生成一个指定了背景颜色和字体颜色的按钮。问题是我只能设置其中一个参数（字体颜色或背景颜色），但不能同时设置两者。

JSON代码：

{
    "Caption": "Module caption",
    "IconsDirectory": "C://Images/",
    "Buttons": [
        {
        "Conditions": [
            {
            "ConditionText": "1 == 1",
            "ButtonText": "Text_11",
            "Visible": true,
            "Colors": {
                "FontColor": "#FFFFFF",
                "BGColor": "#669933"
            },
            "BButtonText": {
                "TText": "Textt_1"
            },
            "Size": {
                "Width": 200,
                "Height": 50
            },
            "Icon": {
                "FileName": "Smile.png",
                "Width": 16,
                "Height": 16
            },
            "Url": {
                "UrlAddress": "http://www.google.com",
                "OpenNewWindow": true
            },
            "JavaScriptAction": {
                "TText": "alert('ok1');"
            }},
        {
            "ConditionText": "2 == 2",
            "ButtonText": "Text_22",
            "Visible": true,
            "Colors": {
                "FontColor": "#0FFFFF",
                "BGColor": "#FF9966"
            },
            "BButtonText": {
                "TText": "Textt_1"
            },
            "Size": {
                "Width": 200,
                "Height": 50
            },
            "Icon": {
                "FileName": "Smile.png",
                "Width": 16,
                "Height": 16
            },
            "Url": {
                "UrlAddress": "http://www.google.com",
                "OpenNewWindow": true
            },
            "JavaScriptAction": {
                "TText": "alert('ok2');"
            }}
        ]}
    ]
}

html代码：

<!DOCTYPE html>
<html>
<head>
<title>SMButtons</title>
<script src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.getJSON('weekendtask.json', function(data) {
    var res = ""
    $.each(data.Buttons, function(key, button) {
        $.each(button.Conditions, function(key, condition) {
            res += "<li>"
            res += '<input type="button"' + '" value="' + condition.BButtonText.TText 
            res += '" onclick="' + condition.JavaScriptAction.TText 

            //background color
            res += '" style=" background-color:' + condition.Colors.BGColor 

            //font color
            //res += '" style=" color:' + condition.Colors.FontColor 

            res += '"/>'
            res += "<\/li>"
        })
    })
    $(res).appendTo('#ulObj')
});
});
</script>
</head>
<body>
<div>
<ul id='ulObj'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>

Answer 1

您正在编写样式属性两次。为什么不这样做

res += '" style=" background-color:' + condition.Colors.BGColor + '; color:' + condition.Colors.FontColor + ';';

生成一个指定了背景颜色和字体颜色的按钮

1 个答案: