Question

如何更改功能，而不是将项目添加到列表中并将其从列表中删除，我可以使用复选框从列表中的初始项目或附加项目中添加/删除项目？

用户体验应该模仿一个愿望清单，通过选中该项目的复选框，在其中添加/删除愿望清单。

// Wish Function
var wish = {
  items: []
};
var update_product = function(product) {};
$(function() {
  //Add to wish
  var addToWish = function(product, qty) {
    qty = qty || 1;
    var wish = getWish();
    var indexOfId = wish.items.findIndex(x => x.id == product.id);
    if (indexOfId === -1) {
      wish.items.push({
        id: product.id,
        img: product.img,
        name: product.name,
      });
      $parent = $("#" + product.id).closest(".items__wish");
      $parent
        .find(".wish-icon")
        .addClass("active")
        .attr("data-prefix", "fas");
    } else {
      wish.items[indexOfId].qty++;
      wish.items[indexOfId].stock = Number(product.stock);
    }
    //Update popup wish
    updateWish(wish);
  };

  var getProductValues = function(element) {
    var productId = $(element)
      .closest(".items__wish")
      .find(".item__tile")
      .attr("id");
    var productImg = $(element)
      .closest(".items__wish")
      .find(".item__img")
      .attr("src");
    var productName = $(element)
      .closest(".items__wish")
      .find(".item__title")
      .html();
    return {
      id: productId,
      img: productImg,
      name: productName,
    };
  };
  $(".my-wish-add").on("change", function() {
    var product = getProductValues(this);
    addToWish({
      id: product.id,
      img: product.img,
      name: product.name,
    });
  });
  //Update wish html to reflect changes
  var updateWish = function(wish) {
    //Add to shopping wish dropdown
    $(".wishlist__items").html("");
    for (var i = 0; i < wish.items.length; i++) {
      $(".wishlist__items").append(
        "<li>" +
        '<div class="my-wish-item">' +
        "<img src='" +
        wish.items[i].img +
        "' />" +
        '<div class="wish-main">' +
        '<div class="wish-name">' +
        wish.items[i].name +
        "</div>" +
        '<div class="my-wish-remove-container">' +
        '<input type="checkbox" id="my-wish-remove' +
        i +
        '" class="my-wish-remove" aria-hidden="true">' +
        "<i class='fas fa-heart'></i>" +
        "</div>"
      );
      //Remove from wish on id
      var removeFromWish = function(id) {
        var wish = getWish();
        var wishIndex = wish.items.findIndex(x => x.id == id);
        wish.items.splice(wishIndex, 1);
        $parent = $("#" + id).closest(".items__wish");
        $parent
          .find(".wish-icon")
          .first()
          .removeClass("active")
          .attr("data-prefix", "far");
        //Update popup wish
        updateWish(wish);
      };
      (function() {
        var currentIndex = i;
        $("#my-wish-remove" + currentIndex).on("change", function() {
          $(this)
            .closest("li")
            .hide(400);
          setTimeout(function() {
            wish.items[currentIndex].stock = "";
            update_product(wish.items[currentIndex]);
            removeFromWish(wish.items[currentIndex].id);
          }, 400);
        });
      })();
    }
  };
  //Get Wish
  var getWish = function() {
    var myWish = wish;
    return myWish;
  };
});

body {
  font-family: "Font Awesome\ 5 Pro";
  font-weight: 900;
}

img {
  width: 50px;
}

.wishlist__list {
  position: absolute;
  right: 0;
}

.wishlist__items li {
  list-style: none;
}

<script src="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="wishlist">
  <div class="wishlist__list">
    <ul class="wishlist__items">
    </ul>
  </div>
</div>
<div class='products'>
  <div class="items__wish">
    <div id='1' class='item__title item__tile'>Product 1</div>
    <img class="item__img" src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg">
    <label class="wish-btn">
    <input type="checkbox" name="wish-check" class='my-wish-add'><i class="wish-icon far fa-heart"></i></input></label>
  </div>
  <div class="items__wish">
    <div id='2' class='item__title item__tile'>Product 2</div>
    <img class="item__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ">
    <label class="wish-btn">
    <input type="checkbox" name="wish-check" class='my-wish-add'><i class="wish-icon far fa-heart"></i></input></label>

Answer 1

这是从项目复选框添加/删除愿望项目的代码。但它不包括愿望清单复选框上的功能，因此您只需参考此代码即可实现所需的功能。 http://jsfiddle.net/s3n7ku6v/1/

var $wishlist__items = $(".wishlist__items");
var $myWishAdd = $(".my-wish-add");

$myWishAdd.on("click", function(e) {
  var $target = $(e.target).parents(".items__wish");

  if (!$(e.target).is(":checked")) {
    removeFromWishList($target);
  } else {
    addToWishList($target);
  }
});

var addToWishList = function($target) {
  var img = $target.find('.item__img').attr('src');
  var $item__title = $target.find('.item__title');
  var id = $item__title.attr('id');
  var name = $item__title.text();

  $(".wishlist__items").append(
    "<li>" +
    '<div class="my-wish-item">' +
    "<img src='" +
    img +
    "' />" +
    '<div class="wish-main">' +
    '<div class="wish-name">' +
    name +
    "</div>" +
    '<div class="my-wish-remove-container">' +
    '<input type="checkbox" id="my-wish-remove' +
    id +
    '" class="my-wish-remove" aria-hidden="true">' +
    "<i class='fas fa-heart'></i>" +
    "</div>"
  );
}

var removeFromWishList = function($target) {
  var id = $target.find(".item__title").attr('id');

  $wishlist__items.find("#my-wish-remove" + id).parents("li").remove();
}

Answer 2

我已经简化了您的代码。这应该给您一个想法。

$(".wish-add").on("change", function() {
  if ($(".wishlist .product[data-id=" + $(this).parent().attr("data-id") + "]").length){
    $(".wishlist .product[data-id=" + $(this).parent().attr("data-id") + "]").remove();
  }else{
    $(".wishlist").append($(this).parent()[0].outerHTML);
  }
});

body {
  font-family: "Font Awesome\ 5 Pro";
  font-weight: 900;
}

img {
  width: 50px;
}

.wishlist {
  position: absolute;
  right: 0;
}

<!doctype html>
<html>
  <body>
    <div class="wishlist">
    </div>
        
    <div class='products'>
      <div class="product" data-id="1">
        <div>Product 1</div>
        <img src="https://www.iconasys.com/wp-content/uploads/2017/06/360-Product-Photography-White-Background-Acrylic-Riser-08.jpg">
        <input type="checkbox" class='wish-add'>
        <i class="far fa-heart"></i>
      </div>
  
      <div class="product" data-id="2">
        <div>Product 2</div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoqpSgkG4AQDQOe33jI1NiW3GW2JSB-_v36aREsVyFQH55JFOJ">     
        <input type="checkbox" class='wish-add'>
        <i class="far fa-heart"></i>
      </div>
    </div>
    
    <script src="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

使用复选框将项目追加到列表中/从列表追加

2 个答案: