Jquery 动态设置所有图像（同一类）不同的src、宽度和高度

我有一堆空图像，我需要动态设置src和定位。所有图像都具有相同的类，但它们的src、宽度和高度不同

src、width和height的值作为属性存储在与id匹配的对象中。在我的

setImage

函数中，我尝试使用

id.width

等获取它们，但它们被认为是未定义的。我怎样才能解决这个问题

请点击此处：

html:

---

另外，如果设置得不太好，我表示歉意，我欢迎任何可以改进的地方，因为我对javascript和jquery还是比较陌生的

我将使用对象数组，使图像id成为对象的另一个属性。见a

var图像=[{
id:‘img_11’，
src:“http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
宽度：60，
身高：60
}, {
id:“img_12”，
src:“http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
宽度：50，
身高：50
}, {
id:‘img_13’，
src:“http://lorempixel.com/output/people-q-c-640-480-2.jpg",
宽度：100，
身高：100
}];
函数setImage（图像）{
jQuery（'#'+image.id）.attr（'src'，image.src）；
jQuery（'#'+image.id）.css（{width:image.width}）；
jQuery（'#'+image.id）.css（{height:image.height}）；
}
jQuery（文档）.ready（函数（）{
对于（var i=0；i

为什么不简单地将它们放在对象中，然后访问属性：

var images = [{
    id: 'img_11',
    src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
    width: 60,
    height: 60
}, {
    id: 'img_12',
    src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
    width: 50,
    height: 50
}, {
    id: 'img_13',
    src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
    width: 100,
    height: 100
}];

function setImage(image) {
    jQuery('#'+image.id).attr('src', image.src);
    jQuery('#'+image.id).css({width: image.width});
    jQuery('#'+image.id).css({height: image.height});
}

jQuery(document).ready(function () {
    for ( var i = 0; i < images.length; i++ ) {
        setImage(images[i]);
    }
});

演示：

var img_11 = {
    src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
    width: 60,
    height: 60
};
var img_12 = {
    src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
    width: 50,
    height: 50
};
var img_13 = {
    src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
    width: 100,
    height: 100
};

function setImage(id) {
    jQuery('#'+id).attr('src', id.src);
    jQuery('#'+id).css({width: id.width});
    jQuery('#'+id).css({height: id.height});
}

jQuery(document).ready(function () {

    jQuery('.imgs').each(function () {
        setImage(this.id);
    });

});

var images = [{
    id: 'img_11',
    src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
    width: 60,
    height: 60
}, {
    id: 'img_12',
    src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
    width: 50,
    height: 50
}, {
    id: 'img_13',
    src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
    width: 100,
    height: 100
}];

function setImage(image) {
    jQuery('#'+image.id).attr('src', image.src);
    jQuery('#'+image.id).css({width: image.width});
    jQuery('#'+image.id).css({height: image.height});
}

jQuery(document).ready(function () {
    for ( var i = 0; i < images.length; i++ ) {
        setImage(images[i]);
    }
});

var obj = {
    'img_11': {
        src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
        width: 60,
        height: 60
    },
        'img_12': {
        src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
        width: 50,
        height: 50
    },
        'img_13': {
        src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
        width: 100,
        height: 100
    },
}

function setImage(id) {
     jQuery('#' + id).attr('src', obj[id].src);
     jQuery('#' + id).css({
          width: obj[id].width,
          height: obj[id].height
      });
}

jQuery(document).ready(function () {
    jQuery('.imgs').each(function () {
        setImage(this.id);
    });
});