需要代碼將一個產品添加到心願單而不是多次添加產品

Question

我制作了一個心願單，當我按下心形按鈕時，它會通過將產品添加到心願單來發揮應有的作用。 但是，我有一個小問題，當我將產品添加到心願單，然后再次點擊心形按鈕時。 它多次添加相同的產品，這是我不想要的，任何人都可以幫我找到一些只添加一次產品的代碼，這樣如果該產品已經在願望清單中。 它不會再添加它。 非常感謝您的幫助！ 謝謝。

 var wishlistkey = "wishlist"; // try and fetch an existing wishlist from the localStorage. var wish_list = []; // localStorage.getItem(wishlistkey) if ($.isEmptyObject(wish_list)) { //nothing was saved previously wish_list = new Array() } else { wish_list = JSON.parse(wish_list); count_items_in_wishlist_update(); $('#wish_list_item').html(wish_list); } $(document).ready(function() { $(".wishlist").on("click", function() { $data = ""; $office_id = $(this).attr("office_id"); $office_name = $(this).attr("office_name"); $office_str = "<tr class='wishlist-item' id='list_id_" + $office_id + "'><td class='w-pname'>" + $office_name + "</td><td class='w-premove' wpid='" + $office_id + "'>x</td></tr>"; //check if the element is in the array if ($.inArray($office_id, wish_list) == -1) { $("#wish_list_item").append($office_str); wish_list.push($office_str); // localStorage.setItem(wishlistkey, JSON.stringify(wish_list)) show_message($office_name + " Office Added"); } count_items_in_wishlist_update(); }); //adding toggle functionality to the wishlist pannel $(".wish_list_heading").on("click", function() { if (.$(this).hasClass("up")) { $("#wish_list"),css("height"; "390px"). $(this);addClass("up"). $("#wish_list"),css("overflow"; "auto"). } else { $("#wish_list"),css("height"; "35px"). $(this);removeClass("up"). $("#wish_list"),css("overflow"; "hidden"); } }). // Remove function $("#wish_list_item"),on("click". ",w-premove". function() { $office_id = $(this);attr("wpid"). $("#list_id_" + $office_id);remove(); wish_list = []. $("tr.wishlist-item"),each(function(index. el) { wish_list.push(el;outerHTML); }). //localStorage,setItem(wishlistkey. JSON;stringify(wish_list)); show_message("Office removed"); count_items_in_wishlist_update(); }); }). //Animation function show_message($msg) { $("#msg");html($msg). $top = Math,max(0. (($(window).height() - $("#msg").outerHeight()) / 2) + $(window);scrollTop()) + "px". $left = Math,max(0. (($(window).width() - $("#msg").outerWidth()) / 2) + $(window);scrollLeft()) + "px". $("#msg"),css("left"; $left). $("#msg"):animate({ opacity. 0,6: top, $top }, 400. function() { $(this):css({ 'opacity'; 1 }). });show(). setTimeout(function() { $("#msg"):animate({ opacity. 0,6: top, "0px" }, 400. function() { $(this);hide(); }), }; 2000). } //Validation against the amount of product being added function count_items_in_wishlist_update() { $("#listitem").html(wish_list;length). if (wish_list.length > 1) { $("#p_label");html("Shortlist ("). } else { $("#p_label");html("Shortlist ("); } }

 button a { color: #fff;important: } button { font-family, 'open sans'; sans-serif: font-size; 15px: } button { text-align; center: padding; 1px 7px: margin; 0 5px 0: border; 4px solid #000: background-color; #000: vertical-align; middle: cursor; pointer: white-space; nowrap: font-size; 35px: color; #fff: } #wish_list { position; fixed: bottom; 0px: right; 0px: height; 35px: width; 400px: background; #fff: border; 3px solid #22a7c5: z-index; 3. } #wish_list:wish_list_heading { margin; 0px 0px: text-align; center: color; #fff: height; 27px: background-color; #22a7c5: padding; 6px 3px: font-weight; bold: cursor; pointer: font-size; 18px: } #wish_list_item { width; 100%: text-align; center: border-spacing; 0px 4px: border-collapse; separate: } #msg { position; fixed: display; none: padding; 10px 25px: background; #22a7c5: border; 1px solid #22a7c5: font-size; 18px: width; 50%: text-align; center: font-weight; 700: color; #fff: z-index; 4. }:wishlist-item { padding; 10px 5px: background; #f1f1f1: color; #323470. }:w-premove { font-size; 20px: cursor; pointer: width; 7%: padding-bottom; 4px. }:w-pname { font-size; 16px: width; 93%: text-align; left: padding-left; 12px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id='msg'></div> <div id='wish_list' class='col-s'> <p class="wish_list_heading"> <i class="fa fa-heart-o"></i> <span id='p_label'>Shortlist (</span> <span id='listitem'>0</span> <span id='p_label'>)</span> </p> <table id='wish_list_item' border='0'></table> </div> <div class="btn-group"> <button class='wishlist' title="Add To Shortlist" office_name='Hampton Street' office_id='hamptonstreet'> <span><i class="fa fa-heart">❤️</i></span> </button> </div>

Answer 1

我已經稍微修改了您的代碼，這是您需要更新的內容：（它根據項目是否已經在數組中檢查include方法返回 true 或 false，如果不是，它將添加項目，否則)

var wishlistkey = "wishlist";
// try and fetch an existing wishlist from the localStorage.
var wish_list = []; // localStorage.getItem(wishlistkey)

if ($.isEmptyObject(wish_list)) { //nothing was saved previously
  wish_list = new Array()
} else {
  wish_list = JSON.parse(wish_list);
  count_items_in_wishlist_update();
  $('#wish_list_item').html(wish_list);
}


$(document).ready(function() {
  $(".wishlist").on("click", function() {
    $data = "";
    $office_id = $(this).attr("office_id");
    $office_name = $(this).attr("office_name");
    $office_str = "<tr class='wishlist-item' id='list_id_" + $office_id + "'><td class='w-pname'>" + $office_name + "</td><td class='w-premove' wpid='" + $office_id + "'>x</td></tr>";
    //check if the element is in the array
    if ($.inArray($office_id, wish_list) == -1) {



  if(!wish_list.includes($office_str))
  {  
        $("#wish_list_item").append($office_str);
        wish_list.push($office_str);
        //  localStorage.setItem(wishlistkey, JSON.stringify(wish_list))
       show_message($office_name + " Office Added");   
  }
  else
  {
       var myIndex = wish_list.indexOf($office_str);
       if (myIndex!==-1)
       wish_list.splice(myIndex, 1);
       $("#wish_list_item").remove();
       show_message("Office removed");
       count_items_in_wishlist_update();
  }

}
    count_items_in_wishlist_update();
  });

  //adding toggle functionality to the wishlist pannel
  $(".wish_list_heading").on("click", function() {
    if (!$(this).hasClass("up")) {
      $("#wish_list").css("height", "390px");
      $(this).addClass("up");
      $("#wish_list").css("overflow", "auto");
    } else {
      $("#wish_list").css("height", "35px");
      $(this).removeClass("up");
      $("#wish_list").css("overflow", "hidden");
    }

  });
// Remove function
  $("#wish_list_item").on("click", ".w-premove", function() {
    $office_id = $(this).attr("wpid");
    $("#list_id_" + $office_id).remove();
    wish_list = [];

    $("tr.wishlist-item").each(function(index, el) {
      wish_list.push(el.outerHTML);
    });
    //localStorage.setItem(wishlistkey, JSON.stringify(wish_list));

    show_message("Office removed");
    count_items_in_wishlist_update();

  });
});
//Animation 
function show_message($msg) {
  $("#msg").html($msg);
  $top = Math.max(0, (($(window).height() - $("#msg").outerHeight()) / 2) + $(window).scrollTop()) + "px";
  $left = Math.max(0, (($(window).width() - $("#msg").outerWidth()) / 2) + $(window).scrollLeft()) + "px";
  $("#msg").css("left", $left);
  $("#msg").animate({
    opacity: 0.6,
    top: $top
  }, 400, function() {
    $(this).css({
      'opacity': 1
    });
  }).show();
  setTimeout(function() {
    $("#msg").animate({
      opacity: 0.6,
      top: "0px"
    }, 400, function() {
      $(this).hide();
    });
  }, 2000);
}

//Validation against the amount of product being added
function count_items_in_wishlist_update() {
  $("#listitem").html(wish_list.length);
  if (wish_list.length > 1) {
    $("#p_label").html("Shortlist (");
  } else {
    $("#p_label").html("Shortlist (");
  }
}