使用数据属性设置LocalStorage

Question

我有2种不同类型的按钮，我想将用户选择保存到localStorage并显示在“购物车”中。我无法弄清楚如何区分它们。现在，两者都显示出来。

JSFiddle

每一个按键都将在数据属性设置不同的值，但有两种类型的值 - 楼层平面图和属性。

JS：

function showElem1() { 
    var $ul = $('<ul />', { "class": "cart1" }); 
     for (var a = 0, len = localStorage.length; a < len; a++) { 
     var $li = $('<li />', { text: localStorage.key(a) }); 
     $('<span />', { "class": "removeitem", data: { remove: localStorage.key(a) }, html: " <i class='icon-trash2'></i>" }) 
      .appendTo($li); 
     $li.appendTo($ul); 
     } 
    $ul.appendTo($('.cart1').empty()); 
};  

function showElem2() { 
    var $ul = $('<ul />', { "class": "cart2" }); 
     for (var a = 0, len = localStorage.length; a < len; a++) { 
     var $li = $('<li />', { text: localStorage.key(a) }); 
     $('<span />', { "class": "removeitem", data: { remove: localStorage.key(a) }, html: " <i class='icon-trash2'></i>" }) 
      .appendTo($li); 
     $li.appendTo($ul); 
     } 
    $ul.appendTo($('.cart2').empty()); 
}; 

showElem1(); 
showElem2(); 

$("body").on('click', '.property', function() { 
    if(!localStorage.getItem($(this).data('property'))) { 
      localStorage.setItem($(this).data('property'), 0); 
    }       
    showElem1(); 
}); 

$("body").on('click', '.floor-plan', function() {   
    if(!localStorage.getItem($(this).data('floorplan'))) { 
      localStorage.setItem($(this).data('floorplan'), 1); 
    }     
    showElem2(); 
}); 


$(".cart").on('click', '.removeitem', function() { 
    localStorage.removeItem($(this).data('remove')); 
    showElem1(); 
    showElem2(); 
}); 

HTML：

<div class="cart"> 
     <div class="cart1"></div> 
</div> 

<div class="cart"> 
     <div class="cart2"></div> 
</div> 

<a data-property="Tri Estate, Kennewick, WA" class="property"> Add to Selections</a> 

<a data-floorplan="Floor Plan 1" class="floor-plan">Add Floorplan</a> 

Answer 1

依我之见， 你没有检查要在2个功能showElem1和showElem2显示的项目类型。

谢谢，