JQueryのリストは、リンクが2回以上クリックされないようにします。

Question

私はしばらくこのことを理解しようとしてきました。 JSON配列を使用してJQueryリストを作成しました。

リスト内のすべてのアイテムはクリック可能で、クリックされたアイテムの詳細が記載された詳細ページが表示されます。

すべてはうまくいきますが、ユーザーがアイテムリンクで何回かクリックすると、ページが正しく読み込まれますが、元のページに戻るには数回クリックする必要があります。ユーザーがアイテムを3回クリックすると、戻ってきたいときに3回戻ってきてください。

リンクを一度クリックすると、リンクを無効にする方法を探しています。

どうすれば達成できますか？

以下の大きなコードサンプルは、私の質問が不明な場合は教えてください。ありがとう！

var items = []; 


$.each(catalog.products, 
     function(index, value) { 

      if (
        ((!filterValue) || value.name.toUpperCase().indexOf(filterValue.toUpperCase()) != -1) 
          && ((!brand) || value.brand.toUpperCase().indexOf(brand.toUpperCase()) != -1) 
          && ((!category) || value.category.toUpperCase().indexOf(category.toUpperCase()) != -1) 
          && ((!sport) || value.sport.toUpperCase().indexOf(sport.toUpperCase()) != -1) 
       ) { 

       var priceInfo; 
       if(value.salePrice === '') { 
        priceInfo = '<h4 style="margin-top:3px;margin-bottom:0px;color:#75a8db "> $' + value.price + '</h4></a></li>'; 
       } else { 
        priceInfo = '<h4 style="margin-top:3px;margin-bottom:0px; "><span style="text-decoration: line-through;font-size:small;">$' + value.price + 
          '</span><span style="color:#75a8db;"> $' + value.salePrice + '</span></h4></a></li>'; 
       } 

       items.push('<li id="' + index + '">' + 
         '<a data-identity="productId" href="./details.page?productId=' + index + '" >' + 
         '<img class="ui-li-thumb" src="' + value.thumbnail + '"/>' + 
         '<p style="margin-bottom:0px;margin-top:0px;">' + value.brand + '</p>' + 
         '<h3 style="margin-top:0px;margin-bottom:0px;">' + value.name + '</h3>' + 
         priceInfo); 



     }} 
     ); 

if (items.length === 0) { 
    items.push('<p style="text-align: left;margin-left: 10px">No results found.</p>'); 
} 
productListView.html(items.join('')); 
productListView.listview('refresh'); 

}

Answer 1

あなただけではなく、テキストのオブジェクトとしてあなたのリンクを構築する場合、あなたはこのようにそれを構築するとして、あなたは、クリックハンドラーにバインドすることができますフィドルIで

// here's the click handler you need 
    itemLink.click(function(e) { 
     console.log("item clicked"); 
     if ($(this).data("clickCount") > 0) { 
      console.log("click count reached"); 
      return false; 
     } 

     console.log("following the link"); 
     // set a click counter 
     $(this).data("clickCount", 1); 
     // store the original href in case you need it 
     $(this).data("ogHref", $(this).attr("href")); 
     $(this).attr("href", "javascript://"); 
    }); 

JSFiddle

できるだけコードを使用していましたが、代わりにjQueryオブジェクトを使用してマークアップを作成しました。

Answer 2

あなたは、たとえば、この一度だけのアクションを実装するjQueryのone()を使用することができます。

$('a').one('click', 
      function(){ 
       alert('hi!'); 
       return false; 
      }); 

JS Fiddle demo。

または、one()を使用せずに、あなたは単に要素からclick()イベントのバインドを解除できます。

$('a').click(
     function(){ 
      alert('hi!'); 
      $(this).unbind('click'); 
      return false; 
     }); 

JS Fiddle demo。 参考文献：

• one()
• unbind()。

Answer 3

var currentValue=""; 

$('a').click(function(event) { 
    event.preventDefault(); 
    if(currentValue != $(this).attr("href")){ 
     currentValue = $(this).attr("href"); 
     // Your actions here 
    } 
}); 

このように、リンクは、そのアクションが最新の場合にはただ死にますが、再利用することができます。 jsFiddle test。