Jquery wordpress post image通过比较图像宽度来添加类-Java 学习之路

问题：

在我的WordPress网站上，我已经应用了一些负边距CSS来定位帖子中的img元素 . 我的CSS适用于宽度为655px的所有图像（.entry-content容器的全宽） .

但是，不幸的是，宽度小于655px的图像被拉向.entry-content容器的左侧，因此它们无法居中对齐 .

要覆盖它，我需要一个jQuery脚本，它将自定义类插入到655px宽以下的所有'.entry-content p img'元素 .

附上截图以帮助解释：请查找附件

这是你可以看到这个问题的帖子：https://vegbyte.com/best-apples-for-juicing

所以jQuery逻辑基本上是：“如果图像宽度小于655px，请插入此类：entry-img-small”

试着

我知道如何在wordpress中使用jquery . 我对jquery一片空白，用下面的代码思考，但不知道该怎么做 .

$(window).load(function () {
   var image = $('.each img');
   if (image.width() < 500) {
      $('.oldclass').addClass('newclass');
  }
 });

Please check screenshot

1 回答

不确定它是否是一个好主意，但在这里你更好地限制内容区域 . .content img

jQuery(window).on('load', function() {
    jQuery('img').each(function() {
        if(jQuery(this).width() < 655) {
            jQuery(this).addClass('entry-img-small');
        }
    });
});

在jQuery中，如果您在图像加载之前在文档就绪上使用它并检查width属性，我认为会更好 .

jQuery(document).ready(function($) {
    $('img').each(function() {
        if($(this).attr('width') < 655) {
            $(this).addClass('entry-img-small');
        }
    });
});

回复于 2024-05-02T08:15:06+08:00

Jquery wordpress post image通过比较图像宽度来添加类

1 回答

相关问题