Question

好的，所以，我有这个（Wordpress驱动的）网站，上面有一些图像。我想在这些图像溢出内容div时缩放这些图像。为了使它们正确缩放，幸运的是，我可以添加一个类.scaled来制作图像width:100%;，并且可以解决问题。

我的问题是，当我检测到图片对于页面来说是否太大时，我似乎无法在页面上选择该特定图像。

HTML：

<div class="entry-content">
   <p>
      <img src="http://upload.wikimedia.org/wikipedia/commons/f/fd/Luftballong.jpg" width="1024" height="768" class="alignnone">
   </p>
</div>

重要的CSS：

.scaled {
   width:100%;
 }

现在，对于jQuery。我目前的设置如下：

$(window).resize(function() {
    if($('section .entry-content img').width() > $('.entry-content').width()) {
        $(this).addClass('scaled')
    }
});

我的问题在于$(this)。我猜它不会在这里选择实际的图像，而是选择其他东西，或者没有特别的东西。

所以我的问题是，用jQuery选择一个图像的最佳方法是什么，并为它应用一个类？我很想看到一些只会让我更改{{ 1}}到其他东西。

提前致谢！

Answer 1

$(window).on('resize', function() {
    $('section .entry-content img').filter(function() {
        return $(this).width() > $(this).closest('.entry-content').width();
    }).addClass('scaled');
});

Answer 2

一种方法是使用如下变量：

$(window).resize(function() {
  var $img = $('section .entry-content img')[0];
  if($img.width() > $('.entry-content').width()) {
    $img.addClass('scaled')
  }
});

Answer 3

尝试将jQuery方法更改为：

$(window).resize(function() {
    $( "section .entry-content img" ).each(function() {
        if($(this).width() > $('.entry-content').width()) {
            $(this).addClass('scaled')
        }
    });
});

这应该处理每个img元素的函数（以及“this”相对于每个img元素。

Answer 4

这里有一堆很好的答案可以满足你想要的功能，但我认为值得补充的是，事件回调函数上下文中的关键字this是指一个DOM元素由JQuery传入。因此，在前面的示例中，$(this)实际上导致了一个包装window元素的JQuery对象。

因此，正如您在许多其他示例中所看到的，解决方案是更改您使用{J}对象的选择器this。

如何使用jQuery以与$（this）相同的方式选择元素？

4 个答案: