来自JSON的jquery.addClass不是相应的工作

jquery.addClass from JSON isn't work correcly

本文关键字：工作 addClass JSON jquery 来自      更新时间：2023-09-26

http://jsfiddle.net/phongphan117/a212my20/我有一个 json 变量，并使用jquery.each()编写 html 标签并为对象中添加类创建循环。如果你看看我的代码，它不能正常工作。如何解决它们？

var db = {
    "class" : [
        {
            "appearance": ["red-bg", "white-text"]
        },
        {
            "appearance": ["yellow-bg", "black-text"]
        },
        {
            "appearance": "red"
        },
        {
            "appearance": "yellow"
        },
        {
            "appearance": ""
        }
    ]
}
$.each(db.class, function (key, data) {
        console.log(data);
        $('main').append('<div class="box">text</div>');
        for (i=0; i<data.appearance.length; i++) {
            var classtext = data.appearance[i].toString();
            $('.box').addClass(classtext);
        }
});
header, main, footer { padding-left: 0px; }
.box { width: 100px; height: 100px; }
.red-bg { background-color: red; }
.yellow-bg { background-color: yellow; }
.white-text { color: white; }
.black-text { color: black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
</main>

问题是，你传递了一些array和一些strings，所以当你有一个数组时，项目是里面的每个项目，即：

["red-bg", "white-text"]
[0] = "red-bg"
[1] = "white-text"

但是当它是一个字符串时，每个项目都是一个字母，即：

"red"
[0] = "r"
[1] = "e"
[2] = "d"

因此，您只需将class数组更新为：

"class" : [
    {
        "appearance": ["red-bg", "white-text"]
    },
    {
        "appearance": ["yellow-bg", "black-text"]
    },
    {
        "appearance": ["red"]
    },
    {
        "appearance": ["yellow"]
    },
    {
        "appearance": [""]
    }
]

您还必须更新每个函数，因为您要将类添加到同一.box。

$('.box:last-child').addClass(data.appearance[i]);

现在，您将data.appearance添加到上次插入的.box中！

它会起作用的！请参阅JSFIDDLE https://jsfiddle.net/2z95ye56/1/

相关文章：