0

PinterestのPinItボタンを使用して、簡単な概念実証をまとめようとしています。ある色で商品の画像を表示する商品ページがありますが、ユーザーはボタンをクリックして同じ商品を別の色で見ることができます。ボタンがクリックされたときに、現在の色を反映するようにPinItボタンのリンクを変更する必要があります。これにより、ユーザーがアイテムを固定しようとすると、現在選択されている色が固定されます。以下は私が現在持っているコードの抜粋です。名前とURL、またはテストサーバーを削除するときに、エスケープ文字を1つか2つ見逃した可能性があります。（無実を保護するために名前が変更されました）

[黒を表示]ボタンをクリックしてから[ピン留め]をクリックすると、白い画像が表示されたままになります。私は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

あなたのコードは正しいようです。ただし、失敗の原因として次の 2 つが考えられます。

  1. #button後でドムするように見える場合は、ライブ イベントが必要です。これが必要な場合は、使用してください

    $('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 に答える