Question

如果用户点击按钮A，循环应该通过cat.json文件运行并检查对象 - (jobcategory)"Data2":"B" == (job)"DataB":"B"，如果是，则在div中显示 - (job)"DataA":"C"和(job)"DataB":"B"

我的Json数据如下所示。

文件名：cat.json

{
    "jobcategory": [
        {"Data1":"A","Data2":"B"},
        {"Data3":"C","Data4":"D"}
    ],

    "job":[
        {"DataA":"C","DataB":"B"},
        {"DataC":"T","DataD":"E"}
    ]
}

myscript.json如下

$(document).ready( function() {
    $.getJSON("cat.json", function(data) {
        $.each(data.jobcategory, function() {
            $("ul").append("<li><button>"+this['Data1']+"</button></li>");
        });
    });
});

在页面上显示“A”和“B”按钮。当用户点击按钮“A”时，不确定如何在div中显示"DataA":"C"和"DataB":"B"。

有什么建议吗？

Answer 1

var btn = $("<li><button>"+this['Data1']+"</button></li>");
$("ul").append(btn);
btn.click(function () {
  $(this).parent().append('<div>' + data.jobs['Data' + $(this).text()] + '</div>');
});

Answer 2

我认为使用实际的javascript循环会更有效率。 jQuery循环非常适合循环遍历DOM元素，但对JSON不是必需的。这些功能应该有助于引导您朝着正确的方向前进。

function jsonToList (json) {
    jsonLen = json.length;
    for (var i = 0; i < jsonLen; i++ ) {
        for (item in json[i]) {
          createLi(json[i][item]);
        }
    }
}

function createLi (text) {
    $("#list").append("<li><button>"+text+"</button></li>");
}

下面是一个可以修改以满足您需求的演示：http://jsfiddle.net/7KvZn/

Json数据上的Jquery循环

2 个答案: