0

我正在尝试用 Pinterest PinIt 按钮组合一个简单的概念证明。我们有一个产品页面，它以一种颜色显示一个项目的图像，但用户可以单击一个按钮并以另一种颜色查看相同的产品。单击按钮时，我需要更改 PinIt 按钮中的链接以反映当前颜色，因此如果用户尝试固定项目，它会固定当前选定的颜色。下面是我目前拥有的代码片段。当我删除名称和 url 或我们的测试服务器时，我可能错过了一个或两个转义字符。（名称已更改以保护无辜者）

当我单击 Show Black 按钮，然后单击 Pin It 时，它仍然显示白色图像。我对 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"/>
4

4 回答 4

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');
    });
});
于 2012-05-17T18:44:31.150 回答
0

您的代码似乎正确。但失败的原因可能有两个：

  1. #button如果稍后出现 dom，则需要实时事件。如果你想要这个然后使用

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

  2. 您没有将您的 jquery 代码包装在$(function { })或$(document).ready(function() {..})即准备好的功能中

于 2012-05-17T18:44:38.090 回答
0

您的代码似乎还可以。也许按钮代码没有任何效果，因为它是在按钮实际存在于 DOM 之前运行的？尝试将其移至页面末尾，或包含在一个$(document).ready(function() { // code here })块中。此外，在将它们添加到 URL 之前，用于对和encodeURIComponent进行编码。productPageproductImage

于 2012-05-17T18:44:50.233 回答
0

尝试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-17T18:44:59.283 回答