javascript - 将大 img src 替换为缩略图 img woocommerce 产品循环

Question

我正在使用 woocommerce，默认情况下它在产品循环中使用大图像。 我的目标是用缩略图(300x300px)替换每个大产品图片(1000x1000px)，缩略图与大图片位于同一文件夹中。 p>

这是html代码:

<div class="products_container">
 <ul>
  <li>
    <div>
       <a>
         <img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2606" src="//wp-content/uploads/2015/08/IMG_2606.jpg" />
       </a>
    </div>
  </li>
  <li>
     <div>
       <a>
         <img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2607" src="//wp-content/uploads/2015/08/IMG_2607.jpg" />
       </a>
    </div>
  </li>
  <li>
     <div>
       <a>
         <img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2608" src="//wp-content/uploads/2015/08/IMG_2608.jpg" />
       </a>
    </div>
  </li>
  ...
  ...
  ...
 </ul>
</div>

每页共有 24 个产品。

还有jQuery:

我尝试将 jQuery 代码放在 <script></script> 下标签 child-theme/woocommerce/loop/loop-start.php <ul> 之前的文件，并且在我的 custom.js 文件中，两者都不起作用。

jQuery(document).ready(function($) {

 $('.products_container img.wp-post-image').each(function() {
   var $this = $(this);

   $this.attr('src').replace('.jpg', '-300x300.jpg');
 });
});

如果我将此代码放入浏览器控制台中，它会根据我的需要用缩略图替换大图像 $('.products_container').find('img.wp-post-image').attr('src').replace('.jpg', '-300x300.jpg');

如有任何帮助，我们将不胜感激

Answer 1

您可以传递一个函数作为 .attr( attributeName, function ) 的第二个参数

为集合中的每个元素调用该函数，并应返回您使用第一个参数定义的属性的新值

jQuery(document).ready(function ($) {
    $('.products_container img.wp-post-image')
        .attr('src', function(idx, src) {
            return src.replace('.jpg', '-300x300.jpg');
        });
});