localStorage 添加到购物车

Question

我正在使用 jQuery 和 localStorage 创建一个简单的 添加到购物车 功能。一切正常，但我无法将 selected class 添加到“添加到购物车”按钮。请帮我添加和删除（切换）selected class。

我需要逻辑来根据产品是否保存在 JSON 我保存在 localStorage 中的按钮上设置 class。

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
var list = $("#fav-list");
var parent = list.parent();

function addFavList() {
  list.detach().empty().each(function(i) {
    for (var x = 0; x < favorites.length; x++) {
      $(this).append('<li>' + favorites[x] + '</li>');
      if (x == favorites.length - 1) {
        $(this).appendTo(parent);
      }

    }
  });
}

addFavList();

$(document).delegate('.cart', 'click', function(e) {
  var id = $(this).parent().html(),
    index = favorites.indexOf(id);

  if (!id) 
    return;

  if (index == -1) {
    favorites.push(id);
  } else {
    favorites.splice(index, 1);
    $(this).parent().removeClass('fav');
  }

  localStorage.setItem('favorites', JSON.stringify(favorites));
  addFavList();
});


$(document).delegate('#delete', 'click', function() {
  localStorage.clear();
  location.reload();
});

请检查这个Fiddle我已经尽力了

Answer 1

$(document).delegate('.cart', 'click', function(e){
           ///*** Try using $target to add selected class to button///
             $target = $(e.target);   
            $target.addClass('selected');
    var id = $(this).parent().html(),
    index = favorites.indexOf(id);

    if (!id) return;
        if (index == -1) {
        favorites.push(id);
    } 
    else {
      ///*** Try using $target to remove selected class from button///
        $target.removeClass('selected');
        favorites.splice(index, 1);
        $(this).parent().removeClass('fav');
    }

Answer 2

我建议只将 项目名称 存储到 localStorage 数组中。喜欢 ["iPhone","Samsung","Macbook Pro"] 而不是 html 链接元素。它有助于在存储或检索值时进行比较。

检查 jsfiddle https://jsfiddle.net/shivkumar/o9xabdtr/

中的更新代码

JavaScript

$(document).ready(function() {

  var favorites = JSON.parse(localStorage.getItem('favorites')) || [];

  var list = $("#fav-list");
  var parent = list.parent();

  function addFavList(){
    list.detach().empty().each(function(i){
        for (var x = 0; x < favorites.length; x++){
        $(this).append('<li><a href="#">'+ favorites[x] + '</a><button class="cart selected">Remove cart</button></li>');
        $(this).appendTo(parent);
            $('.list').find("li:contains("+ favorites[x] +")").find('.cart').addClass('selected');
            $('.list').find("li:contains("+ favorites[x] +")").find('.cart').html('Remove cart');
        }
    });

  }

  addFavList();

  $(document).delegate('.cart', 'click', function(e){

    var item = $(this.parentElement.firstElementChild).text();
    index = favorites.indexOf(item);

    if (!item) return;
    if (index == -1) {
        favorites.push(item);
    }
    else {
      $('.list').find("li:contains("+ favorites[index] +")").find('.cart').removeClass('selected');
      $('.list').find("li:contains("+ favorites[index] +")").find('.cart').html('Add to cart');
      favorites.splice(index, 1);
    }

    localStorage.setItem('favorites', JSON.stringify(favorites));
    addFavList();
  });


  $(document).delegate('#delete', 'click', function(){
     localStorage.clear();
     location.reload();
  });

});

CSS

ul, ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  min-width: 110px;
  display: inline-block;
  padding: 0 0 10px 0;
}

.selected {
  background: #333;
  color: #fff;
}

#res, #fav-list {
  margin: 0 0 20px 0;
}

.clearfix {
  clear: both;
}

.cart {
  background: green;
  color: white;
}

.fav {
  border: 1px solid green;
}

.selected {
  background: red;
}

HTML

<html>

<body>

  <ul class="list">
    <li><a href="#">iPhone</a><button class="cart">Add to cart</button></li>
    <li><a href="#">Samsung</a><button class="cart">Add to cart</button></li>
    <li><a href="#">Macbook Pro</a><button class="cart">Add to cart</button></li>
    <li><a href="#">Dell Laptop</a><button class="cart">Add to cart</button></li>
  </ul>

  <div class="clearfix"></div>
  <br/>
  <div id="res">

  Your Cart

    <ul id="fav-list">

    </ul>
    <br/>

  </div>

  <button id="delete">Delete</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>

Answer 3

在某些情况下，最好移动经常重复的步骤以发挥作用。考虑以下 jQuery：

$(function() {
  function getFavData() {
    var data = localStorage.getItem('favorites');
    var fav = JSON.parse(data) || [];
    console.log("Getting Data", fav);
    return fav
  }

  function saveFavData(data) {
    if (typeof data === 'object') {
      data = JSON.stringify(data);
    } else {
      data = JSON.stringify([data]);
    }
    localStorage.setItem('favorites', data);
    console.log("Saving Data", data);
    return true;
  }

  function showFavData(target) {
    var list = getFavData();
    target.empty();
    console.log("Showing Data", target, list);
    $.each(list, function(k, v) {
      $("<li>").html(v).appendTo(target);
    });
  }

  function clearFavData(event) {
    event.preventDefault();
    var res = confirm("Are you sure you want to delete all the items in your Cart?");
    if (res) {
      localStorage.setItem('favorites', '');
      localStorage.clear();
      location.reload();
      console.log("Data Cleared");
    }
  }

  $(".cart").click(function(e) {
    e.preventDefault();
    var list = getFavData();
    var item = $(this).prev("a").text();
    var index = list.indexOf(item);

    if (!item) return;
    if (index == -1) {
      list.push(item);
    } else {
      list.splice(index, 1);
      $(this).parent().removeClass('fav');
    }
    saveFavData(list);
    showFavData($("#fav-list"));
  });

  $('#delete').click(clearFavData);
});

您可以在此处查看工作示例：

https://jsfiddle.net/Twisty/3wmvou45/34/

即使它们很小，拆分工作也允许您在脚本中的任何位置执行这些操作。如果您必须返回并重建它，它可以使您的脚本看起来更干净，更容易理解。适当的注释或良好的命名约定可以帮助您确定每个功能将执行的具体工作。

您的代码还可以从一些额外的检查中获益。就像删除时一样，确保用户真的想删除所有数据。或者在保存数据时，确保它是一个正在保存的数据数组。

除非您的 HTML 元素是动态创建的，否则您不需要使用 .delegate()。如果以编程方式生成 HTML，我建议改用 .on()。

As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged.

您的许多 select 请求和代码也不正确。例如：

var id = $(this).parent().html();

在此代码段中，$(this) 指的是被单击的按钮。 .parent() select 是按钮的父元素，即 <li> 元素。最后是.html()returnsinnerHTML的<li>。所以最后，id 将包含：

<a href="#">iPhone</a><button class="cart">Add to cart</button>

当尝试确定该项目是否存在于数组中时，这将失败。由于您只是想要 "iPhone" 字符串，因此您可能想要 select <a> 元素的 .text()。两种方式都适合你：

var id = $(this).parent().find("a").text();
var id = $(this).prev("a").text();

希望对您有所帮助。

Answer 4

你的fiddle我几乎没有锻炼，我想现在可能是你想要的。

现在正在切换 class selected 删除和添加到购物车。

我编辑了 fiddle，这是代码。

var favorites = JSON.parse(localStorage.getItem('favorites')) || [];


var list = $("#fav-list");
var parent = list.parent();

function addFavList(){
      $(document).find('.cart').removeClass('selected');
      list.detach().empty().each(function(i){

      for (var x = 0; x < favorites.length; x++){
           $(this).append('<li>' + favorites[x] + '</li>');

           $('.list li').each(function(){
               if($(this).html() == favorites[x]){
                   $(this).find('.cart').addClass('selected')
               }
            });
            if (x == favorites.length - 1){
            $(this).appendTo(parent);


           }
       }
    });

}
addFavList();

$(document).delegate('.cart', 'click', function(e){
    $(this).removeClass('selected');
    var id = $(this).parent().html();

    var index = favorites.indexOf(id);


    if (!id) return;
        if (index == -1) {
        favorites.push(id);
        $(this).addClass('selected');
    } 
    else {
       favorites.splice(index, 1);
       $(this).parent().removeClass('fav');
       $(this).removeClass('selected');
    }

    localStorage.setItem('favorites', JSON.stringify(favorites));
    addFavList();
});


$(document).delegate('#delete', 'click', function(){
   localStorage.clear();
   location.reload();   
   $(document).find('.cart').removeClass('selected');
});

我不确定它是否能让您完全满意，但希望它对您有用。

这里还有fiddlelink。请尝试清除本地存储。 https://jsfiddle.net/8adbjstz/75/

localStorage 添加到购物车

localStorage Add to Cart

jquery

shopping-cart

local-storage