Question

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

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

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中显示的项目类型。

谢谢，

使用数据属性

1 个答案: