使用Jquery

Question

我是javascript的新手，对此我将非常感谢。

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

对于肖像图像，我想给它一个肖像，对于ladscape类风景图像和正方形正方形图像。我是通过将宽度除以高度来实现的，如果该值等于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

我建议您创建一个函数并将其命名为所需的图像：

.ProfileActivity

Answer 3

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

，然后从选择器中删除>。

'.detailsection > img'

更改为

'.detailsection img'

要获得清晰的代码，我建议使用@kapantzak答案。