改變圖片src不起作用

我有以下代碼改變圖片src不起作用

<div class="row"> 
    <div class="col-md-4 product-image"> 
     <img width="295" height="982" src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2.png 295w, http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2-90x300.png 90w" sizes="(max-width: 295px) 100vw, 295px"> </div> 
    <div class="col-md-8"> 
     <h4 class="ltru-underline ltru-inline">Product 4</h4> 
     <p></p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p></p> 
     <div class="product-thumbs"> 
      <a href="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-1.png"> 
       <img src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-1.png" alt=""> 
      </a> 
      <a href="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2.png"> 
       <img src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-2.png" alt=""> 
      </a> 
      <a href="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-3.png"> 
       <img src="http://localhost/2017/ltru/wp-content/uploads/2017/03/IMG_8576-copy-3.png" alt=""> 
      </a> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div>

，我試圖改變.product-image imgsrc屬性有以下JS：

$('.product-thumbs a').on('click', function(e){ 
     e.preventDefault(); 
     var src = $(this).attr('href'); 
     var main_img = $(this).closest('.product-detail').find('.product-image img'); 

     main_img.attr('src', src); 
});

我可以看到從JS控制檯.product-image imgsrc正在改變，當我點擊產品的拇指，但圖像不會改變。是srcset造成這種情況？

來源

2017-03-16 Dariel Pratama

試圖改變srcset屬性以及屬性src：

$('.product-thumbs a').on('click', function(e){ 
     e.preventDefault(); 
     var src = $(this).attr('href'); 
     var main_img = $(this).closest('.product-detail').find('.product-image img'); 

     main_img.attr('src', src); 
     main_img.attr('srcset', src); // <-- changing srcset attribute 
});

來源

2017-03-16 05:13:34

好吧，更改'srcset'也解決了這個問題。但我認爲我現在要去除這個屬性。謝謝@Alexander Reznikov –

不客氣。如果它有用，請投我的答案。 –

我覺得你img的選擇是不正確的。其實.product-image img會給你.product-image所有圖像，用拇指沿所以用>在.product-image img之間嘗試

var main_img = $(this).closest('.product-detail') 
      .find('.product-image > img'); // now it will give you a single object and src will be applied to that one only.

一個更好的選擇就可以了，那img使用類名稱，以便它會很容易只得到該圖像像

var main_img = $(this).closest('.product-detail') 
      .find('.product-image img.wp-post-image'); // no need to use > in this case

來源

2017-03-16 05:13:35

謝謝你增加'img.wp-post-image'，我認爲它會使腳本工作得更快，不是嗎？ –

是的，你不必擔心其他圖像，它只會影響該圖像的src。 –

改變圖片src不起作用

回答

相關問題