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

在确定图像是横向还是纵向后，我尝试向图像添加一个类。我遇到的问题是，类被添加到img标记中，就像这个img.scape一样，显然没有正确注册。我如何才能正确地实现这一点：我假设您想在之前动态创建几行的标记中添加一个类？如果是，您可以这样做：

因为它在一个循环中，并且您将有多个div.image_掩码，所以使用数组索引j作为类限定符：

---

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

只需将其放在字符串构建中即可

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

编辑：更多选项

如果要使其更详细、更清晰，可以逐个构建元素：

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

或者，如果您希望使用更高效的字符串构建，但希望它更具可读性/性能，您可以使用连接执行数组：

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

---

你的问题可能不清楚，至少对我来说是这样。也许一把小提琴可以帮助你展示你想要的东西。我认为你应该使用if/else。以后当有人愚弄程序时，这很容易理解。为什么不在附加映像时添加类呢？我以前的解决方案是在附加的映像中添加一个if/else语句，并添加类string@dystroy,因此，只需将其放入字符串构建中，我还提供了一个三元操作，使其比完整的if/else更干净。这是非常不必要的类污染，复杂，并且在循环的每一次迭代中都执行额外的查找。不要使用这种方法。在初始附加中添加类。@Travis-我已经更新了我的答案。也就是说，我建议你阅读FAQ关于什么时候进行否决投票是合适的，每当你遇到一篇非常草率、不费力气的帖子，或者一个答案明显而且可能是危险的错误时，就使用否决票。。您可能不喜欢我最初的方法，但它几乎不符合这些标准。Thanks@Madbreaks，我觉得你的答案很草率，甚至你的编辑。它执行不必要且缓慢的工作，这可能导致严重的性能影响，具体取决于使用环境。我保守地使用了我的反对票，但你的答案是值得的。@Madbreaks，仅仅是为了观点，我不是在谈论对绩效的影响。如果有多个图像源，每个都有自己的循环，会发生什么？分段装载怎么样？如果在循环运行之前出于某种原因添加了一个图像，会怎么样？在所有这些情况下，您的方法都会失同步并发生冲突。我并不是说它在这种非常有限的、特定的情况下不起作用，但如果它有可能轻易地打破这种局面，那么它肯定是草率的。我并不是说它在这种非常有限的、特定的情况下不起作用，很好，那么不要否决它。我写这个答案并不是为了解决手头上所有可能的问题，而是为了解决这个问题。它满足了ops的需求，而且速度不慢。您认为ops正在加载多少图像？。如果你不同意它的速度有多慢，发布一些数字来支持你的说法，我很有兴趣看到它们。

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

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