使用縮略圖替換大型img src woocommerce產品循環

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文件<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'); 
     }); 
});