クリックイベントでhtmlを生成し重複をチェックする

Question

私がやっていることは、クリックイベントを確認してからHTMLを生成することです。問題は、リンクが複数回クリックされたときに重複した値が生成されることです。私は間違って何を見ているのですか？私のコードは次のとおりです。

(function ($) { 
$.fn.hotelComparison = function() { 

    $('a.js-hotel-box').click(function(event){ 
     event.preventDefault(); 
     var obj = $(this),     
      hotelId = obj.data("hotel-id"); 
      ids = $.cookie("hotel-comparison"); 

     if(!ids){       
      $.cookie("hotel-comparison", hotelId , { path: '/' });    
     } 
     else{ 
      $.cookie("hotel-comparison", ids + "," + hotelId , { path: '/' });  
     } 
    }); 

    favouriteHotels(); 
}; 


function favouriteHotels(){ 

    var hotelIds = [];  
    $('.js-hotel-box').on('click', function(e){ 
     e.preventDefault(); 
     var obj = $(this); 

     hotelIds.push({ 
      hotelId: $(this).data('hotel-id') , 
      hotelName: $(this).data('hotel-name'), 
      hotelImage: $(this).data('hotel-image') 
     }); 

     // check for duplicate values 
     var dupes = {}; 
     var singles = [];    
     $.each(hotelIds, function(i, el) { 
      if (!dupes[el.hotelId]) { 
       dupes[el.hotelId] = true; 
       singles.push(el); 
      } 
     }); 

     var html = '<ul class="favoriteItems">'; 

     jQuery.each(singles, function(index, value) { 
        html += '<li class="hotel-image">';  
         html += '<a class="js-delete-hotel delete" id="'+ value.hotelId +'" href="#" title="Odebrat hotel ze schránky"><span></span></a>'; 
         html += '<img class="hotel_image" src="'+ value.hotelImage +'" width="70px" height="70px" />'; 
         html += '<li class="hotel-name">' + value.hotelName + '</li>'; 
        html += '</li>'; 
     }); 

     html += '</ul>'; 

     $('.hotelItems').append(html); 

    }); 


} 

}（jQuery））;

Answer 1

2回クリックするだけで2回の機能を実行するのは簡単です。

ブール変数を追加し、関数実行時にtrueに設定します。

条件を追加すると、関数は変数がfalseに設定されている場合にのみ実行されます。

とfalseに初期化します。

私はあなたのリストを一度にすべて調べて、それを<ul>に挟んでいることがわかります。だから私はこれで理解していることは、すべてのコードで完了しているということです。

なぜ、あなたは追加を使用していますか？私は、追加は、さらに進んでさらに連結することを意味します。