Question

我尝试使用从另一个页面发送的JSON数据来更改一组图像的来源，JSON数据看起来像这样：

var jsondata = {
    "images": [
    {"src": "images/bgset.jpg"},
    {"src": "images/ar006.png"},
    {"src": "images/br006.png"},
    {"src": "images/cr006.png"},
    {"src": "images/dr006.png"},
    {"src": "images/er001.png"},
    {"src": "images/tr004.png"},
    {"src": "images/tr011.png"}
]}

我尝试使用src类更改图像集的.imageset值。我也很累，想办法把第一个留在JSON数据{"src": "images/bgset.jpg"}中。我不知道怎么解决这个问题。我甚至不确定如何从这些数据中获取值！

更新

感谢您的回答！通过我目前创建的答案：

var jsonStr = location.search.substring(1).split('=');
var obj = JSON.parse(unescape(jsonStr[1]));
var jsondata = JSON.parse(obj.jsondata);
var aa = jsondata.images.length;
var ab = jsondata.images.slice(1, aa); // this part removes the first src
var ac = $(".imageset");
// here is the confusion part i found this will go through the set
for( var i = 0; i < aa; i++ ) {              
}
// and this will go through each class
ac.each( function() {
})

我如何加入这两个代码可以为每个类放一个图像src？

Answer 1

jQuery有一些非常好的功能来做你想要的。试着在这里看看它们： http://api.jquery.com/jQuery.parseJSON/

应该教你如何用你的代码'读'JSON。

现在对于图像源，也使用jQuery。你可以使用

$(".imageset").attr("src", jsondata[0].src);

例如。

如果你想用图像集类循环遍历所有图像，你可以只使用for / foreach循环（google it，很容易）

Answer 2

如果您的意思是跳过第一个图像源，请获取相应的来源：

var relevantSources = jsondata.images.shift(); // All except the first one.

接下来，您将要使用类.imageset的图像元素，如下所示：

var relevantImageElements = document.getElementsByClassName(".imageset"); // Or jQuery $(".imagesets");

最后，假设顺序已经合适，只需循环遍历它们。

var ln = Math.min( relevantSources.length, relevantImageElements.length;
for( var i = 0; i < ln; i++ ) {
    relevantImageElements[ i ].src = relevantSources[ i ];
}

这有用吗？

Answer 3

好的，这是它的工作答案，再次感谢@EricG和@donnywals，没有你们，答案是不可能的。

var jsonStr = location.search.substring(1).split('=');
var obj = JSON.parse(unescape(jsonStr[1]));
var jsondata = JSON.parse(obj.jsondata);
var aa = jsondata.images.length;
var ab = jsondata.images.slice(1, aa);
var i = 0;
$(".imageset").each(function(i) {
    $(this).attr("src", ab[i++].src);
});

使用javascript / jQuery使用JSON数据更改图像源

3 个答案: