只需要代码将一个产品添加到愿望列表中，而不是多次添加产品

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

我对您的代码做了一些修改。以下是您需要更新的内容：(它根据项目是否已经在数组中来检查返回true或false的include方法，如果不是，它将添加项目，否则(

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