0
JQueryでショッピングカートのような機能を構築しています。これまでのところ、問題なくカートにアイテムを追加したり削除したりすることができます。JQueryショッピングカートにローカルストレージまたはクッキーを追加する
ただし、ユーザーがページを更新したり、ナビゲートすることを決定した場合、リスト内のアイテムは保持されます。
ここには、ローカルストレージがない機能するカートのスニペットがあります。ここで
$(document).ready(function() {
$(".btn-primary").click(function(e) {
$(this).toggleClass("btn-warning");
toggleText($(this));
if (!$(`li[data-attribute="${e.target.id}"]`).length) {
addItem(e.target.id);
} else {
$(`li[data-attribute="${e.target.id}"]`).remove();
}
setBadge();
$(".btn-danger").click(function() {
removeItem($(this).parent("li"));
});
});
});
function removeItem(item) {
$(`#${item.data("attribute")}`).removeClass("btn-warning");
toggleText($(`#${item.data("attribute")}`));
item.remove();
setBadge();
}
function addItem(item) {
$("ul").append(
`<li class='well' data-attribute='${item}'>
${$(`.${item}-container p`).text()}
<button class='btn btn-danger'>-</button>
</li>`
);
}
function setBadge() {
$(".badge").remove();
$("h3").after("<span class='badge'>" + $("li").length + "</span>");
}
function toggleText(item) {
if (item.hasClass("btn-warning")) {
item.text("-");
} else {
item.text("+");
}
}h3 {
display: inline;
}
.list-inline {
padding: 3rem 0;
}
li.well {
margin: 0 2rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="well item-1-container">
<p class="lead">
Item 1
</p>
<button class="btn btn-primary" id="item-1">+</button>
</div>
</div>
<div class="col-xs-3">
<div class="well item-2-container">
<p class="lead">
Item 2
</p>
<button class="btn btn-primary" id="item-2">+</button>
</div>
</div>
<div class="col-xs-3">
<div class="well item-3-container">
<p class="lead">
Item 3
</p>
<button class="btn btn-primary" id="item-3">+</button>
</div>
</div>
<div class="col-xs-3">
<div class="well item-4-container">
<p class="lead">
Item 4
</p>
<button class="btn btn-primary" id="item-4">+</button>
</div>
</div>
</div>
</div>
<hr />
<div class="container">
<h3>The List </h3>
<ul class="list-unstyled list-inline"></ul>
</div>アイテムが保存されているようなカートにローカルストレージを組み込むための私の試みのCodePen Demoです。あなたがデモで見ることができるように、それは動作していません。
誰かが私が間違っていることを理解できますか？
これは多くの役に立ちます。カートにアイテムが追加されずにアイテムが追加されると、アイテムはページを更新した後でも保持されます。 ただし、永続化されたストアを更新して更新すると、その後の更新時に更新が保持されません。あなたはあなたのためにこれを見ていますか？ - アイテム1とアイテム2を追加し、次に更新します。アイテムはそこにあります。すべては順調です。 - アイテム1を削除し、すべてのアイテムが最新表示時にきれいに拭き取られます。 更新後に永続ストアにアイテムを追加する際に、矛盾が発生しています。あなたはこれを見ますか？ –
私はそれをチェックさせてください... – Shiladitya
私はcodePen https://codepen.io/Shiladitya/pen/VzpQzMを更新しました。見て... – Shiladitya