JQuery, чтобы изменить атрибут href ссылки tage

Question

Я пытаюсь собрать простое доказательство концепции с помощью кнопки Pinterest PinIt. У нас есть страница продукта, которая отображает изображение элемента одним цветом, но пользователь может нажать кнопку и увидеть тот же продукт в другом цвете. Когда нажимается кнопка, мне нужно изменить ссылку на кнопку PinIt, чтобы отобразить текущий цвет, поэтому, если пользователь попытается вывести элемент, он выведет текущий выбранный цвет. Ниже приведен фрагмент кода, который у меня есть. Возможно, я пропустил escape-символ или два, когда удалял имена и URL-адреса или наши тестовые серверы. (Имена были изменены для защиты невинных)

Когда я нажимаю кнопку «Показать черный», а затем нажмите «Закрепить», он по-прежнему показывает белое изображение. Я довольно новичок в 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); 
}); 

Markup:

<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"/> 

Answer 1

$(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'); 
    }); 
}); 

Answer 2

Ваш код кажется прав. Но может быть две причины неудачи:

1. #button необходим живой случай, если он появляется на Dóm позже. Если вы хотите, то используйте

   $('body').on('click', '#button', function() { 
       // your code 
   }); 
   

2. Вы не обернуть код JQuery в $(function { }) или $(document).ready(function() {..}) т.е. готовой функции

Answer 3

Ваш код кажется, хорошо. Может быть, код кнопки не имеет никакого эффекта, потому что он запускается до того, как кнопка фактически существует в DOM? Попытайтесь переместить его в конец страницы или заключите в блок $(document).ready(function() { // code here }). Кроме того, используйте encodeURIComponent для кодирования productPage и productImage перед добавлением их в URL-адрес.

Answer 4

Попробуйте 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); 
});