javascript - 将 JSON 变量转换为 jquery/HTML

Question

我希望在页面加载时引用一些 JSON 变量。根据值为 true/false 的值，将类附加到 html 元素。

无法让它工作，希望得到一些帮助 - jquery 和所有新手。

// html
<form id="add_form">
<script type="application/json" data-type="product"
{"product_options": [
{"sku": "ABC123", "price": "$10", "in_stock": true, "can_order": true, "option1": "Small"},
{"sku": "DEF456", "price": "$20", "in_stock": false, "can_order": false, "option1": "Medium"}], "id": 31, "name": "Some Shirt style"}
</script>...</form>

我想遍历 .size_options 类的元素，并根据 JSON 中的“in_stock”值向 li 元素添加一个类；即，如果该值为真，则添加一个类。

// parse JSON data
var obj = JSON.parse($("#add_form script[type='application/JSON']").html());

$(".size_options li").each() {
    some code
});

如果有任何帮助，我将不胜感激。

Answer 1

在这种情况下，number of li 和 obj.product_options 的length 应该相等。

$(".size_options li").each(function (index) {
    if (obj.product_options[index].in_stock) {
        $(this).addClass("classToBeAdd");
    }
});