Question

我使用的是woocommerce，默认情况下它使用产品循环中的大图像。目标是我想用缩略图（300x300px）替换每个大型产品图像（1000x1000px），该图像与大图像包含在同一文件夹中。

以下是 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标记下，然后放在我的 custom.js 文件中不起作用。

<ul>

如果我将此代码放在浏览器控制台中，它会根据我的需要用缩略图替换大图像jQuery(document).ready(function($) { $('.products_container img.wp-post-image').each(function() { var $this = $(this); $this.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');
        });
});

用缩略图img woocommerce产品循环替换大型img src

1 个答案: