javascript - 使用 Jquery 有条件地将类添加到图像

Question

我是 javascript 的新手，非常感谢这方面的帮助。

我想根据尺寸为特定 div 中的图像提供类。

对于肖像图像，我想给它一个类肖像，对于景观类风景图像和方形图像。我通过将宽度除以高度来完成此操作，如果该值等于 1，我将给该图像指定一类正方形，如果大于 1 个横向图像，如果小于 1 个纵向图像。

我这样做是为了在 div 中提供具有不同宽高比和不同 css 样式的图像。

我不想对所有图像执行此操作，而是对特定 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

我建议您应该创建一个函数并为每个所需图像调用它:

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));
    });
});