Question

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

src，width和height的值作为属性存储在名称与id匹配的对象中。在我的setImage函数中，我尝试使用id.width等来获取它们，但它们是未定义的。我该如何解决这个问题？

jsfiddle在这里：

HTML：

<div class="img-holder">
    <img class="imgs" id="img_11" />
</div>
<div class="img-holder">
    <img class="imgs" id="img_12" />
</div>
<div class="img-holder">
    <img class="imgs" id="img_13" />
</div>

的javascript：

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

});

PS。道歉，如果设置不是很好，我欢迎任何可以做的改进，因为我仍然是javascript和jquery的新手。

Answer 1

我会使用一个对象数组，使图像成为该对象的另一个属性。查看working fiddle here。

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

Answer 2

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

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

演示：http://jsfiddle.net/lotusgodkk/nNh2n/3/

动态设置所有图像（具有相同的类）不同的src，宽度和高度

2 个答案: