1

在确定图像是横向还是纵向后，我正在尝试向图像添加一个类。我遇到的问题是该类被添加到这样的img标签img.landscape中，显然没有正确注册。我怎样才能正确地做到这一点：<img class="landscape"？

$(data.images).each(function(j, imageURL){
        var thumbnail = new Image();
        thumbnail.src = imageURL;
        thumbnail.onload = function() {
            $('.images').append('<div class="image_mask"><a href="' + imageURL + '"><img src="' + imageURL + '"/></a></div>');
            if (thumbnail.width > thumbnail.height){
                $(this).addClass('landscape');
            }
        };
});

我之前的解决方案是在附加字符串中添加一个带有类的 if/else 语句，但我想知道是否有更简洁的方法来解决这个问题。谢谢！

编辑 -

http://jsfiddle.net/curly33/XeHzK/1/

4

2 回答 2

0

我假设您想将一个类添加到<img>您之前动态创建几行的标签中？如果是这样，您可以这样做：

$('.image_mask img').addClass('landscape');

由于它在一个循环中并且您将拥有多个div.image_mask，因此请使用数组索引j作为类限定符：

$(data.images).each(function(j, imageURL){
        ...
        thumbnail.onload = function() {
            $('.images').append('<div class="image_mask image_mask' + j + '"><a href="' + imageURL + '"><img src="' + imageURL + '"/></a></div>');
            //                                                     ^^^^^^
            if (thumbnail.width > thumbnail.height){
                $('.image_mask' + j + ' img').addClass('landscape');
                //              ^^^^^^
            }
        };
});

更新

尽管这被接受了，但像我最初建议的那样添加类名对我来说感觉很笨拙。更简洁的方法是结合使用j数组索引变量和 jQuery 的eq函数来定位相关的图像掩码：

$('.images .image_mask').eq(j).addClass('landscape');

..然后取消整个添加类的方法。

于 2013-04-12T16:53:16.553 回答
0

把它放在你的弦乐建筑里

$(data.images).each(function(j, imageURL){
        var thumbnail = new Image();
        thumbnail.src = imageURL;
        thumbnail.onload = function() {
            var orientationClass = thumbnail.width > thumbnail.height ? "landscape" : "portrait";
            $('.images')
                .append(
                    '<div class="image_mask"><a href="' +
                    imageURL +
                    '"><img class="' +
                    orientationClass +
                    '" src="' +
                    imageURL +
                    '"/></a></div>'
                );
        };
});

编辑：更多选项

如果你想让它更详细但更简洁，你可以一个一个地构建元素：

var $img = $('<img />', {
    class: thumbnail.width > thumbnail.height ? "landscape" : "portrait",
    src: imageUrl
});

var $a = $('<a />', {
    href: imageUrl,
}).append($img);

var $div = $('<div />', {
    class: "image_mask"
}).append($a);

$('.images').append($div);

或者，如果您想使用更有效的字符串构建，但它更具可读性/性能，您可以使用连接做一个数组：

var contents = [
    '<div class="image_mask"><a href="',
    imageURL ,
    '"><img class="',
    orientationClass,
    '" src="',
    imageURL,
    '"/></a></div>'];

$('.images').append(contents.join(''));
于 2013-04-12T16:56:50.263 回答