Question

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

当我单击“显示黑色”按钮然后单击“固定它”时，它仍然显示白色图像。我对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

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

#button需要直播活动，如果它似乎晚了。如果你想要这个，那就用
```
$('body').on('click', '#button', function() {
  // your code
});
```
您不会将jquery代码包装在$(function { })或$(document).ready(function() {..})中，即就绪函数

Answer 3

您的代码似乎没问题。也许按钮代码没有任何效果，因为它是在按钮实际存在于DOM之前运行的？尝试将其移至页面末尾，或将其括在$(document).ready(function() { // code here })块中。此外，在将encodeURIComponent和productPage添加到网址之前，请使用productImage对其进行编码。

Answer 4

尝试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);
});

JQuery更改链接标记的href属性

4 个答案: