JQuery更改鏈接tage的href屬性

我正試圖用Pinterest PinIt按鈕將概念的簡單證明放在一起。我們有一個產品頁面，用一種顏色顯示一個項目的圖像，但用戶可以點擊一個按鈕並以另一種顏色查看同一產品。點擊按鈕時，我需要更改PinIt按鈕中的鏈接以反映當前顏色，因此如果用戶嘗試固定項目，它會固定當前選定的顏色。以下是我目前擁有的代碼片段。當我刪除名稱和網址或我們的測試服務器時，我可能錯過了一個或兩個轉義字符。（名稱已更改爲保護無辜）JQuery更改鏈接tage的href屬性

當我單擊顯示黑色按鈕，然後單擊固定它時，它仍顯示白色圖像。我對JQuery很新，所以任何幫助將不勝感激。

JS：

$("#button").click(function() { 
     var productPage = "http://myproductpage.com"; 
     var productImage = "http://MyproductimageBlack.jpg"; 
     var productDescription = "MyProduct"; 

     var linkValue = "http://pinterest.com/pin/create/button/?url=" + productPage + "&media=" + productImage + "&description=" + productDescription; 

     $('#PinLink').attr('href', linkValue); 
});

標記：

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmyproductpage.com%3D524&amp;media=http%3A%2F%2myproductimagewhite.jpg&amp;description=MyProduct" id="PinLink" class="pin-it-button"> 
    <img src="//assets.pinterest.com/images/PinExt.png" title="Pin It!" alt="Pin It!" /> 
</a> 

<input type="button" id="button" name="button" value="Show Black"/>

來源

2012-05-17 Rhonda

$(function() { 
    $("#button").on('click', function() { 
     $('#PinLink')[0].href = $('#PinLink')[0].href.replace('myproductimagewhite' ,'MyproductimageBlack'); 
    }); 
});

如果它是動態的做：

$(function() { 
    $(document).on('click', '#button', function() { 
     $('#PinLink')[0].href = $('#PinLink')[0].href.replace('myproductimagewhite' ,'MyproductimageBlack'); 
    }); 
});

來源

2012-05-17 18:44:31 adeneo

你代碼似乎是對的。但也有可能是故障的兩種原因：

#button需要通過實時的事件，如果它出現以後DOM。如果你想要這個，然後使用
```
$('body').on('click', '#button', function() { 
    // your code 
}); 
```
你不$(function { })或$(document).ready(function() {..})即準備函數內包裝jQuery代碼

來源

2012-05-17 18:44:38 thecodeparadox

你的代碼看起來還好。也許按鈕代碼沒有任何效果，因爲它在按鈕實際存在於DOM之前運行？嘗試將其移動到頁面末尾，或者將其放在$(document).ready(function() { // code here })塊中。另外，在將它們添加到URL之前，請使用encodeURIComponent對productPage和productImage進行編碼。

來源

2012-05-17 18:44:50 bfavaretto

我試過所有這些建議，它仍然無法正常工作。該鏈接是使用HTMLTextWriter動態創建的，但即使我在html中對其進行了硬編碼，我也會得到相同的結果。我開始認爲這與我的環境有關。當我嘗試替換方法時，我得到了這個錯誤。 – Rhonda

Microsoft JScript運行時錯誤：無法獲取屬性'replace'的值：對象爲null或undefined – Rhonda

嘗試使用encodeURIComponent()來對URL進行編碼。

$("#button").click(function() 
{ 
    var productPage = encodeURIComponent("http://myproductpage.com"); 
    var productImage = encodeURIComponent("http://MyproductimageBlack.jpg"); 
    var productDescription = encodeURIComponent("MyProduct"); 

    var linkValue = "http://pinterest.com/pin/create/button/?url=" + productPage + "&media=" + productImage + "&description=" + productDescription; 

    $('#PinLink').attr('href', linkValue); 
});

來源

2012-05-17 18:44:59

JQuery更改鏈接tage的href屬性

回答

相關問題