Question

如果照片的高度超过450像素高，有没有办法让页面上的每张图片都使用“.photo”类并将“.vertical”类应用到它所在的文章中？我这样做的原因是因为我希望高照片不那么宽，所以添加了类.trical来设置文章样式，使文章250px而不是500px的正常宽度......

基本上，如果一张照片的500px版本显示在一个页面上并且500px照片的高度超过450px，它应该通过在该文章中添加类.vertical来调整整个文章的大小。

这听起来令人困惑，但一旦你理解它就不会。我是新手，所以代码很受欢迎，我不知道该怎么做。

Answer 1

是的，有。

首先获取图像高度。 How to get image size (height & width) using javascript?

如果高度符合您的要求，请使用.addClass()添加课程。

Answer 2

尝试：

$('img.photo').each(function(){
    if($(this).height() > 450)
        $(this).closest('article').addClass('vertical');
});

更新以将类添加到父文章。根据需要更改选择器article。

Answer 3

试试这个：

$(".photo").each(function(){
  var el = $(this);
  if (el.height() > 450)
    el.addClass("vertical");
});

Answer 4

类似的东西：

$(".photo").each(function(i) { 
  if ($(i).height() >450) {
     $(i).addClass('yourclass');
  }
});

Answer 5

希望这会让你开始：

$('img.photo').each(function(index) {
    var height = $(this).height();
    if (height > 450) {
        $(this).parent().addClass('vertical');
    }
});

编辑：

关于将.vertical类添加到包含图像的文章，这取决于您的标记。 @anonymous通过找到与.article类最接近的元素有一个可能的想法。如果直接父级是包含图像的文章，您也可以在我上面编辑的代码中使用父级。

根据图像高度添加一个类

5 个答案: