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

change image source with JSON data with javascript / jQuery

本文关键字：图像 数据 JSON javascript jQuery 使用      更新时间：2023-09-26

i试图用从另一个页面发送的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"}
]}

并尝试用.imageset的类来改变图像集的src值。我也很累地想办法把第一个留在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？

jQuery有一些非常好的函数可以满足您的需求。请尝试在此处查看它们：http://api.jquery.com/jQuery.parseJSON/

这应该教你如何用代码"读取"JSON。

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

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

例如。

如果你想用imageset类循环浏览所有图像，你可以使用for/foreach循环（谷歌一下，很容易）

如果您确实想跳过第一个图像源，请获取如下相关源：

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 ];
}

这有用吗？

好吧，这是它的有效答案，再次感谢@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);
});
相关文章：