Question

我在使用jquery循环遍历一组html代码时遇到了一些麻烦。我编写了一个小的条件脚本，可以检测图像是否为纵向或横向，并为其中任何一个添加一个类。这在隔离方面很有效，但现在我需要在同一页面上检测多个实例......

<li>
 <figure class="eventimage">
  <img class="" src="images/home1.jpg">
 </figure>
 <div>
  some other code that is not important
 </div>
</li>
<li>
 <figure class="eventimage">
  <img class="" src="images/home2.jpg">
 </figure>
 <div>
   some other code that is not important
 </div>
</li>
<li>
 <figure class="eventimage">
  <img class="" src="images/home3.jpg">
 </figure>
 <div>
   some other code that is not important
 </div>
</li>
<li>
 <figure class="eventimage">
  <img class="" src="images/home4.jpg">
 </figure>
 <div>
   some other code that is not important
 </div>
</li>

所以我认为它利用了.each方法......

$(".eventimage img").each(function() {
    if ( .width() > .height()){
        //it's a landscape
        $(this).addClass("landscape");
    } else if ( .width() < .height()){
        //it's a portrait
        $(this).addClass("portrait");
    } else {
        $(this).addClass("canttell");
    }
});

我的问题是每个img标签输出完全相同的结果，我的测试图像是风景和肖像的良好混合，所以有些事情是不对的。

有人可以帮忙吗？

Answer 1

我想你忘了在.width()和.height()前面提到jQuery对象

$(".eventimage img").each(function() {
    if ( $(this).width() > $(this).height()){
        //it's a landscape
        $(this).addClass("landscape");
    } else if ( $(this).width() < $(this).height()){
        //it's a portrait
        $(this).addClass("portrait");
    } else {
        $(this).addClass("canttell");
    }
});

我认为您试图找到图片的width和height。所以在他们面前添加了$(this)。

Answer 2

而不是每个循环，我使用onload事件来允许首先下载图像：

$(".eventimage img").onload = function() {
  var width = this.width;
  var height = this.height;
      if ( width > height){
        //it's a landscape
        $(this).addClass("landscape");
    } else if ( width < height){
        //it's a portrait
        $(this).addClass("portrait");
    } else {
        $(this).addClass("canttell");
    }
}

修改

在某些情况下，我的示例代码可能过于简单，可能需要在JS中预加载图像。要使用此方法，可能需要先预先加载图像，然后通过执行以下操作来获取其大小：

var GetImageSize = function( src, callback ) { this.src = src; this.callback = callback; this.image = new Image(); this.requestImageSize() };

以下是其他人如何做到这一点的例子：

http://jsfiddle.net/peterbenoit/MWVLY/

Answer 3

根据您的逻辑，将您的代码更改为：

$(".eventimage img").each(function(index, element) {
    if ($(element).width() > $(element).height()){
        //it's a landscape
        $(element).addClass("landscape");
    } else if ( $(element).width() < $(element).height()){
        //it's a portrait
        $(element).addClass("portrait");
    } else {
        $(element).addClass("canttell");
    }
});

请参阅jquery.each()：http://api.jquery.com/jquery.each/

的文档

jquery循环使用.each来检测宽度和高度

3 个答案: