Question

我确定在确定图像是横向还是纵向后，将图像添加到图像中。我遇到的问题是该类正被添加到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/

Answer 1

我假设您要在<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');

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

Answer 2

将它放在你的字符串构建

中

$(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(''));

将类添加到图像onload - 确定是否为横向

2 个答案: