Question

我想将一个类应用于网站上的所有水平imgs。

我正在尝试使用下面的此功能，但它不起作用任何帮助将不胜感激。

$(function() {
  var images = document.querySelectorAll('[data-srcset]');

  for (var i = 0; i < images.length; i++) {
    if (images[i].naturalWidth > images[i].naturalHeight) {
      $(images[i]).addClass('horizontal');
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://cdn.pixabay.com/photo/2015/02/18/11/50/mountain-landscape-640617_960_720.jpg" alt=landscape>

Answer 1

这是因为您提供的data:...图片是1x1，因此对images[i].naturalWidth > images[i].naturalHeight的检查失败。

请注意，如果您使用{{1>}属性（而非srcset ）这是默认设置，它将按预期工作（但您需要使用页面的data-srcset事件）。

load

$(window).load(function() {
  var images = document.querySelectorAll('[srcset]');

  for (var i = 0; i < images.length; i++) {
    if (images[i].naturalWidth > images[i].naturalHeight) {
      $(images[i]).addClass('horizontal');
    }
  }
})

.horizontal{border:10px solid OliveDrab;}

Answer 2

最好将alt=landscape替换为alt="landscape"。

两个

var images = document.querySelectorAll('[data-srcset]');

和

var images = $('[data-srcset]');

适合我。

你的问题是if语句不是真的。它总是转到else。

尝试使用以下代码更新您的if语句。

if (images[i].naturalWidth > images[i].naturalHeight) {
    $(images[i]).addClass('horizontal');
    console.log(images[i]);
} else {
    console.log('else');
}

你会发现它总是转向别的。

querySelectorAll不使用data-srcset

2 个答案: