点击事件生成 html 并检查重复项答案

【问题标题】：On click event generate html and check for duplicates点击事件生成 html 并检查重复项
【发布时间】：2016-07-16 22:43:44
【问题描述】：

我要做的是检查点击事件，然后生成 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));

【问题讨论】：

标签： jquery arrays cookies plugins

【解决方案1】：

点击两次就可以运行两次功能非常简单。

添加一个布尔变量，并在函数运行时将其设置为 true。

并添加条件，函数将仅在变量设置为 false 时运行。

并且，将其初始化为 false。

正如我所见，您一次浏览了所有列表并将其夹在 <ul> 中。所以我对此的理解是你已经完成了所有代码。

那你为什么要使用附加。我的意思是 append 是为了进一步连接。

【讨论】：