使用 Jquery 有条件地向图像添加类

Question

我是 javascript 的新手，非常感谢您的帮助。

我想根据尺寸对特定 div 中的图像进行分类。

对于纵向图像，我想给它一个肖像类，对于横向类风景图像和方形图像。我通过将宽度除以高度来做到这一点，如果值等于 1，我给这个图像一个正方形类，如果大于 1 个横向，如果小于 1 个纵向。

我这样做是为了给具有不同纵横比不同 css 样式的 div 中的图像。

我不想对所有图像执行此操作，而是对特定 div 中的图像执行此操作。在我的 div 类“detailsection”和 div 类“imagesection”的示例中

我无法让代码正常工作。我很难指定特定的 div 和图像。

感谢所有帮助。

$(window).on('load', function() {
  $('.imagesection > img').each(function() {
    if ($(this).width() / $(this).height() > 1) {
      $(this).addClass('landscape');
    } else if ($(this).width() / $(this).height() >= 1) {
      $(this).addClass('square');
    } else {
      $(this).addClass('portrait');
    }
  });
});

$(window).on('load', function() {
  $('.detailsection > img').each(function() {
    if ($(this).width() / $(this).height() > 1) {
      $(this).addClass('landscape');
    } else if ($(this).width() / $(this).height() >= 1) {
      $(this).addClass('square');
    } else {
      $(this).addClass('portrait');
    }
  });
});

.imagesection {
  max-width: 1000px;
  margin: 0 auto;
}

.imagesection img {
  overflow: hidden;
}

.imagesection img.landscape {
  max-width: 1000px;
  width: 70%;
  height: auto;
  margin: 5% 15%;
}

.imagesection img.portrait {
  width: 40%;
  margin: 0 auto;
  float: left;
}

.detailsection {
  max-width: 1000px;
  margin: 0 auto;
}

.detailsection img {
  overflow: hidden;
}

.detailsection img.landscape {
  max-width: 1000px;
  width: 70%;
  height: auto;
  margin: 5% 15%;
}

.detailsection img.portrait {
  width: 40%;
  margin: 0 auto;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="detailsection">
  <!--Detail Title Image-->
  <div class="titlepg">
    <img src="https://via.placeholder.com/1000x1000" alt="" class="titlepg">
  </div>
  <!--Detail Title Image-->

  <!--Detail Spec Image-->
  <div class="specpg">
    <img src="https://via.placeholder.com/1000x1000" alt="" class="specpg">
  </div>
  <!--Detail Spec Image-->

  <!--Detail Option Image-->
  <div class="optionpg">
    <img src="https://via.placeholder.com/1000x1000" alt="" class="optionpg">
  </div>
  <!--Detail Option Image-->

  <!--Detail Detail Image pg-->
  <div class="detailimagepg">
    <img src="https://via.placeholder.com/1000x500" />
    <img src="https://via.placeholder.com/500x1000" />
    <img src="https://via.placeholder.com/500x1000" />
  </div>
  <!--Detail Detail Image pg-->

</div>

<div class="imagesection">
  <img src="https://via.placeholder.com/1000x500" />
  <img src="https://via.placeholder.com/500x1000" />
  <img src="https://via.placeholder.com/500x1000" />
</div>

Answer 1

从您的选择器中删除 >。

.imagesection > img 

变成

.imagesection img

Answer 2

我建议您应该创建一个函数并将其调用为所需图像的 foreach：

function applyImageClass(image) {
   var h = (image) ? image.height() : 0;
   if (h > 0) {
       var ratio = image.width() / h;
       if (ratio === 1) {
           image.addClass('square');
       } else if (ratio > 1) {
           image.addClass('landscape');
       } else if (ratio < 1) {
           image.addClass('portrait');
       }
   }      
}

$(window).on('load', function() {
    // Find all images contained in any element that has any of the tow classes
    $('.imagesection, .detailsection').find('img').each(function() {
        // Call the function for each one of the matched elements
        applyImageClass($(this));
    });
});

Answer 3

在代码中正确使用 } 关闭 else if 语句。

然后从选择器中删除 >。

'.detailsection > img'

改为

'.detailsection img'

为了获得清晰的代码，我推荐@kapantzak 回答。