링크 테그의 href 속성을 변경하는 JQuery

Question

Pinterest PinIt 버튼을 사용하여 간단한 개념 증명을 작성하려고합니다. 한 가지 색상의 항목 이미지를 표시하는 제품 페이지가 있지만 사용자는 버튼을 클릭하여 다른 색상으로 동일한 제품을 볼 수 있습니다. 버튼을 클릭하면 현재 색상을 반영하도록 PinIt 버튼의 링크를 변경해야하므로 사용자가 항목 고정을 시도하면 현재 선택한 색상이 고정됩니다. 아래 코드는 현재 가지고있는 스 니펫입니다. 나는 이름과 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); 
}); 

마크 업 :

<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

귀하 코드가 옳은 것 같습니다. 나중에는 DOM 나타나는 경우

1. #button 라이브 이벤트를 필요로 :하지만 실패의 두 가지 원인이있을 수 있습니다. 이 다음

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

2. 사용하려는 경우

Answer 3

귀하의 코드가 좋아 보인다 $(function { }) 또는 $(document).ready(function() {..}) 즉 준비 기능 내에서 jQuery 코드를 포장하지 않습니다. 단추가 실제로 DOM에 존재하기 전에 단추 코드가 실행되기 때문에 단추 코드가 효과가 없을 수 있습니까? 페이지 끝으로 이동하거나 $(document).ready(function() { // code here }) 블록으로 묶으십시오. 또한 URL에 URL을 추가하기 전에 encodeURIComponent을 사용하여 productPage 및 productImage을 인코딩하십시오.

Answer 4

URL을 인코딩하려면 encodeURIComponent()을 시도하십시오.

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