В некоторых случаях лучше перенести шаги, которые часто повторяются, для работы.Рассмотрим следующий 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() устарел.Он был заменен методом .on(), начиная с jQuery 1.7, поэтому его использование уже не поощрялось.
Ряд ваших селекторов и код также были неверны.Например:
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();
Надеюсь, что поможет.