Jquery change .prop href

Question

我試圖更改#lienImghref單擊.product_thumbnailsli a但似乎不起作用。奇怪的是，.primary_image更新...

<script type="text/javascript" charset="utf-8"> 
 
    $(document).ready(function() { 
 
    $(".product_thumbnails li a").click(function(e) { 
 
     var imglink = $(this).attr("href"); 
 
     return e.preventDefault(); 
 
     $("#lienImg").prop("href", imglink); 
 
     $(".primary_image").attr("src", imglink); 
 
     $(".product_thumbnails li").removeClass("active"); 
 
     $(this).parent().addClass("active"); !1 
 
    }) 
 
    }); 
 
    </script>

<div class="product_images"> 
 
    <a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;w=1200" class="MagicZoom" rel="zoom-position: inner" id="lienImg" title="" style="position: relative; display: inline-block; text-decoration: none; outline: 0px; width: 576px;"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000" alt="Image of Bol Or" class="primary_image" style="opacity: 1;"><div class="MagicZoomBigImageCont MagicBoxShadow" style="overflow: hidden; z-index: 100; top: -100000px; position: absolute; width: 576px; height: 384px; left: 0px; opacity: 0;"><div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div><div style="overflow: hidden;"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;w=1200" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -350px; top: -413px;"></div><div style="color: rgb(255, 0, 0); font-size: 10px; font-weight: bold; font-family: Tahoma; position: absolute; width: 100%; display: none; left: 0px; top: 364px;">Please upgrade to full version of Magic Zoom™</div></div><div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 276px; height: 184px; opacity: 0.5; left: 193px; top: 200px;"></div><div class="MagicZoomHint" style="display: block; overflow: hidden; position: absolute; visibility: visible; z-index: 1; left: 2px; right: auto; top: 2px; bottom: auto; opacity: 0.75; max-width: 572px;">Zoom</div></a> 
 
    
 
    <ul class="product_thumbnails"> 
 
     
 
     <li class=""><a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;w=300" alt="Image of Bol Or"></a></li> 
 
     
 
     <li class="active"><a href="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&amp;fit=max&amp;w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> 
 
     
 
     <li><a href="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000"><img src="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&amp;fit=max&amp;w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> 
 
     
 
    </ul> 
 
    
 
</div>

Answer 1

爲什麼使用控制檯執行代碼？調試之前，你會發現這個問題的回報。更新下面的代碼，它工作正常。

$(document).ready(function() { 
     $(".product_thumbnails li a").click(function(e) { 
      var imglink = $(this).attr("href"); 
      e.preventDefault(); 
      $("#lienImg").prop("href", imglink); 
      $(".primary_image").attr("src", imglink); 
      $(".product_thumbnails li").removeClass("active"); 
      $(this).parent().addClass("active"); !1 
     }) 
     }); 

Answer 2

由於Web開發人員說，不需要返回preventDefault（）函數，您還需要指向div中的img。

$(document).ready(function() { 
 
    $(".product_thumbnails li a").click(function(e) { 
 
     e.preventDefault(); 
 
     var imglink = $(this).attr("href"); 
 
    \t $("#lienImg > img").prop("src", imglink); 
 
      // Notice you need to point to a image 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="product_images"> 
 
    <a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;w=1200" class="MagicZoom" rel="zoom-position: inner" id="lienImg" title="" style="position: relative; display: inline-block; text-decoration: none; outline: 0px; width: 576px;"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000" alt="Image of Bol Or" class="primary_image" style="opacity: 1;"><div class="MagicZoomBigImageCont MagicBoxShadow" style="overflow: hidden; z-index: 100; top: -100000px; position: absolute; width: 576px; height: 384px; left: 0px; opacity: 0;"><div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div><div style="overflow: hidden;"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;w=1200" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -350px; top: -413px;"></div><div style="color: rgb(255, 0, 0); font-size: 10px; font-weight: bold; font-family: Tahoma; position: absolute; width: 100%; display: none; left: 0px; top: 364px;">Please upgrade to full version of Magic Zoom™</div></div><div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 276px; height: 184px; opacity: 0.5; left: 193px; top: 200px;"></div><div class="MagicZoomHint" style="display: block; overflow: hidden; position: absolute; visibility: visible; z-index: 1; left: 2px; right: auto; top: 2px; bottom: auto; opacity: 0.75; max-width: 572px;">Zoom</div></a> 
 
    
 
    <ul class="product_thumbnails"> 
 
     
 
     <li class=""><a href="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&amp;fit=max&amp;w=300" alt="Image of Bol Or"></a></li> 
 
     
 
     <li class="active"><a href="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&amp;fit=max&amp;w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> 
 
     
 
     <li><a href="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&amp;fit=max&amp;h=1000&amp;w=1000"><img src="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&amp;fit=max&amp;w=300" alt="Image of Bol Or" data-pin-nopin="true"></a></li> 
 
     
 
    </ul> 
 
    
 
</div>

Answer 3

卸下返回e.preventDefault（）;因爲它在初始化var imglink後立即破壞了你的代碼。

$(".product_thumbnails li a").click(function(e) { 
    e.preventDefault(); 
    var imglink = $(this).prop("href"); 
    $("#lienImg").prop("href", imglink); 
    // ... extra code 
}); 

這行代碼：

$("#lienImg").prop("href", imglink); 

已經改變lienImg的href屬性的點擊product_thumbnails鏈接。

在另一方面.primary_image由於該行更新：

$(".primary_image").attr("src", imglink); 

刪除它不會使primary_image的圖像變化的點擊product_thumbnails圖像。