Question

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

我需要根据产品是否保存在本地存储的JSON中来设置按钮类的逻辑。

selected

请在我力所能及的地方查看此Fiddle

Answer 1

我建议仅将商品名称存储到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 2

在某些情况下，最好移动经常重复执行的步骤以发挥作用。考虑以下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()。

自jQuery 3.0起，.delegate()已被弃用。从jQuery 1.7开始，它被.on()方法所取代，因此不鼓励使用它。

许多选择器和代码也不正确。例如：

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

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

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

这将在尝试识别数组中是否存在此项时失败。由于您只需要"iPhone"字符串，因此您需要选择.text()元素的<a>。两种方法都可以为您工作：

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

希望有帮助。

Answer 3

我在您的小提琴中几乎没有锻炼，我想您现在就可以这样做。

现在，它在删除和添加到购物车时切换类selected。

我已经编辑了小提琴，这是代码。

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');
});

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

这里也是小提琴链接。请尝试清除本地存储。 https://jsfiddle.net/8adbjstz/75/

Answer 4

$(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');
    }

localStorage添加到购物车

4 个答案: