如何在心愿单按钮中添加切换功能，以添加和删除心愿单中的项目

Question

var wishlistkey = "wishlist";
// try and fetch an existing wishlist from the localStorage.
var wish_list = localStorage.getItem(wishlistkey);
console.log(wish_list,$.isEmptyObject(wish_list));
if ($.isEmptyObject(wish_list)) { //nothing was saved previously
wish_list = [];
} else {
wish_list = JSON.parse(wish_list);
count_items_in_wishlist_update();
}

$(document).ready(function() {
count_items_in_wishlist_update();
$(".wishlist").on("click", function() {
const 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
const found = $.inArray(office_id, wish_list) > -1;
if (found) {
$("#list_id_" + office_id).remove();
wish_list = wish_list.filter(id => id != office_id);
show_message(office_name + " Office Removed");
}
else {
$("#wish_list_item").append(office_str);
wish_list.push(office_id);
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 = wish_list.filter(id => id != office_id);
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() {
$("#p_label").html(wish_list.length > 0 ? "My Shortlist ("+wish_list.length+")" : "My Shortlist"); 
$('#wish_list_item').empty();
$(".wishlist").each(function(index, el) {  
const office_id = $(el).attr("office_id");
const found = wish_list.includes(office_id);
console.log(office_id,wish_list,found);
const $heart = $(el).find(".fa");
$heart.toggleClass("fa-heart",found);
$heart.toggleClass("fa-heart-o",!found);
if (found) {
const office_name = $(el).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>`;
$('#wish_list_item').append(office_str);
}  
});
localStorage.setItem(wishlistkey, JSON.stringify(wish_list));
}

我制作了一个心愿单，通过按钮将项目添加到心愿单中，并通过按下项目旁边的十字从心愿单中删除项目。然而，我也需要通过按钮本身的切换功能来添加和删除项目的按钮。如果可能的话，我希望在愿望清单项目中添加一个超链接。我真的不知道该怎么做。有人能帮忙吗？

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

这是的更新版本

你需要推送ID并测试它。

我还简化了count_items_in_wishlist_update

注意：上传到服务器时，请记住取消注释localStorage语句

我现在只在一个地方更新本地存储

在此处测试代码：https://plungjan.name/SO/lslike/

const offices = {
"hamptonstreet": {
office_name: 'Hampton Street',
office_url: 'https://hamptonstreet.co.uk'
},
"kensingtonstreet": {
office_name: 'Kensington Street',
office_url: 'https://kensingtonstreet.co.uk'
}
};
document.querySelector('.btn-group').innerHTML = Object.entries(offices).map(([key, office]) => `<button class='wishlist' title="Add To Shortlist" office_name='${office.office_name}' office_id='${key}'>
<span><i class="fa fa-heart"></i></span>${office.office_name}</button>`).join('')
const wishlistkey = "wishlist";
// try and fetch an existing wishlist from the localStorage.
let wish_list = null; // localStorage.getItem(wishlistkey) // uncomment and remove null
wish_list = wish_list ? JSON.parse(wish_list) : []
count_items_in_wishlist_update();
$(document).ready(function() {
count_items_in_wishlist_update(); // show what is already in wishlist
$(".wishlist").on("click", function() {
const office_id = $(this).attr("office_id"),
office = offices[office_id];
//check if the element is in the array
const found = $.inArray(office_id, wish_list) > -1
if (found) {
$(`#list_id_${office_id}`).remove()
show_message(office.office_name + " Office Removed");
} else {
wish_list.push(office_id);
show_message(office.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 = wish_list.filter(id => id != office_id);
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() {
$("#p_label").html(wish_list.length > 0 ? "Shortlist (" + wish_list.length + ")" : "Shortlist");
$('#wish_list_item').empty();
$(".wishlist").each(function(index, el) {
const office_id = $(el).attr("office_id");
const found = wish_list.includes(office_id);
//    console.log(office_id,wish_list,found)
const $heart = $(el).find(".fa");
$heart.toggleClass("fa-heart", found);
$heart.toggleClass("fa-heart-o", !found);
if (found) {
const office_id = $(el).attr("office_id"),
office = offices[office_id],
office_str = `<tr class="wishlist-item" id="list_id_${office_id}"><td class="w-pname"><a href="${office.office_url}">${office.office_name}</a></td><td class="w-premove" wpid="${office_id}">x</td></tr>`;
$('#wish_list_item').append(office_str);
}
})
// localStorage.setItem(wishlistkey, JSON.stringify(wish_list)); // uncomment 
}

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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<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>
</p>
<table id='wish_list_item' border='0'></table>
</div>
<div class="btn-group">
</div>