Json數據上的Jquery循環

如果用戶點擊按鈕A，則循環應該貫穿cat.json文件並檢查對象是否爲(jobcategory)"Data2":"B" == (job)"DataB":"B"，如果是，則在div中顯示-(job)"DataA":"C"和(job)"DataB":"B"。Json數據上的Jquery循環

我有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"。

有什麼建議嗎？

來源

2013-11-21 user3011931

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

來源

2013-11-21 21:21:14 beautifulcoder

我認爲使用實際的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/

來源

2013-11-21 21:38:47 Jeffpowrs

Json數據上的Jquery循環

回答

相關問題