Question

我有一个关于jquery addClass图像的问题。

我正在尝试从codepen.io的 DEMO 中思考

所以问题是如果图像高度大于宽度，则javascript不会从图像中添加类。在这方面，任何人都可以帮助我吗？

这是我的测试jquery代码：

$(document).ready(function() {
  var img = document.getElementById('.user_posted_image');
  //or however you get a handle to the IMG
  var width = img.clientWidth;
  var height = img.clientHeight;

  if(width < height){
     $('img').addClass('portrait');
  }
});

Answer 1

使用$(".user_posted_image")代替document.getElementById('.user_posted_image')。您正试图通过.classSelector获取商品。

document.getElementById它仅用于标识符，但如果您有jQuery库，则可以使用#idSelector代替。此外，您还可以使用jQuery.width()和jQuery.height()方法。

$(document).ready(function() {
  var img = $('#user_posted_image');//jQuery id selector

  var width = img.width(); //jQuery width method
  var height = img.height(); //jQuery height method

  if(width < height){
     img.addClass('portrait');
  }
});

<img id="user_posted_image" src="image.png" width="100" height="150" />

编辑（Demo CodePen）：您正在使用多个图像，您应该使用.each方法来引用所有元素，第一个代码只能在一个元素中使用。

$(document).ready(function() {
  var imgs = $('.imgpreview');//jQuery class selector
  imgs.each(function(){
    var img = $(this);
    var width = img.width(); //jQuery width method
    var height = img.height(); //jQuery height method
    if(width < height){
       img.addClass('portrait');
    }else{
       img.addClass('landscape');
    }
  })
});

Answer 2

猜猜你想要这样的东西：http://codepen.io/BramVanroy/pen/MwrJMx

$(document).ready(function() {
  var img = $('.user_posted_image');
  img.each(function() {
    var $this = $(this),
        width = $this.children("img").width(),
        height = $this.children("img").height();
    if (width < height) {
      $this.addClass('portrait');
    } else {
      $this.addClass('landscape');
    }
  });
});

使用指定的类迭代所有div。如果内部的图像宽度小于其高度：添加班级肖像。另外：添加课堂风景。

注意：正如评论中指出的那样，您需要等待图片加载才能成功运行此脚本。我过去曾成功使用imagesLoaded plugin。

包括imagesLoaded插件，它将如下所示：

$(document).ready(function() {
  $(".chated-poeople").imagesLoaded(function() {
    var img = $('.user_posted_image');
    img.each(function() {
      var $this = $(this),
        width = $this.children("img").width(),
        height = $this.children("img").height();
      if (width < height) {
        $this.addClass('portrait');
      } else {
        $this.addClass('landscape');
      }
    });
  });
});

不要忘记在HTML中添加插件：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>

如果图像高度大于宽度，则Jquery addClass

2 个答案: