单击时图像消失问题（javascript）

我应该为javascript任务构建一个存储。这家商店有三件商品和一个统计商品总数的柜台。通过单击事件更新每个项目，该事件根据html中定义的数据属性更改值。然后将其保存到cookies中，并允许我们在进入结账页面时使用存储的内容。Cookie存储和总数都会更新，但不幸的是，每次单击事件发生时，图像都会消失。我一直在搜索代码，我不明白为什么会发生这种情况。有人能帮忙吗

$（文档）.ready（函数（）{
$（“#牛仔裤系列”）.text（Cookies.get（“牛仔裤”）| | 0）
$（“jeanJacket行”）.text（Cookies.get（“jeanJacket”）| | 0）
$（“腰带线”）.text（Cookies.get（“腰带”）| | 0）
$（“#总计”）.text（Cookies.get（“总计”）| 0）
//DOM将更改为每个cookie的键值或0
$（'.item'）。单击（函数（）{
itemTotal=parseInt（$（this）.text（））
oneMore=itemTotal+（$（this）.data（'cost'））
$（此）.text（更多）
Cookies.set（$（this.data（'name'），一个或多个）
setTotal（）
});
////更新购物中伪项目的总成本
函数setTotal（）{
var jeans=parseInt（Cookies.get（“jeans”））
var jeanJacket=parseInt（Cookies.get（“jeanJacket”））
var belt=parseInt（Cookies.get（“belt”））
曲奇饼干套装（“总计”（牛仔裤+牛仔裤+腰带）| | 0）
$（“#总计”）.text（Cookies.get（“总计”）| 0）
};
//输入数据并关闭模式对话框
var模态=$（“#模态框”）
var电子邮件输入；
$（“.email submit”）。单击（功能（e）{
e、 预防默认值（）；
email_input=$（“#email val”）.val（）
console.log（电子邮件输入）
var checkEmail=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]++]；
如果（检查email.test（电子邮件输入））{
提醒（“这是一封好邮件！”）
Cookies.set（“电子邮件”，电子邮件输入）
css（“显示”、“无”）
}否则{
警报（“这不是有效的电子邮件地址！”）
}
});
//使用“关闭单击”事件关闭模型
$（“.close”）。单击（函数（）{
css（“显示”、“无”）；
});
})//关闭文档。准备就绪

这些伪产品的总数为：

图像被删除的原因是以下代码：

$('.item').click(function () {
    itemTotal = parseInt($(this).text())
    oneMore = itemTotal + ($(this).data('cost'))
    $(this).text(oneMore) // <-- this overrides everything inside div.item
    Cookies.set($(this).data('name'), oneMore)
    setTotal() 
});

您可能还需要修改

设置总计

以添加默认值

| 0

，这样即使有一个或多个项目未被勾选，它也可以正确计算总计：

function setTotal() {
 var jeans = parseInt(Cookies.get("jeans") || 0)
 var jeanJacket = parseInt(Cookies.get("jeanJacket") || 0)
 var belt = parseInt(Cookies.get("belt") || 0)

 Cookies.set("total", (jeans + jeanJacket + belt) || 0)
 $("#total").text(Cookies.get("total") || 0)
};

---

您可以在

中查看简化演示。图像被删除的原因是因为以下代码：

$('.item').click(function () {
    itemTotal = parseInt($(this).text())
    oneMore = itemTotal + ($(this).data('cost'))
    $(this).text(oneMore) // <-- this overrides everything inside div.item
    Cookies.set($(this).data('name'), oneMore)
    setTotal() 
});

您可能还需要修改

设置总计

以添加默认值

| 0

，这样即使有一个或多个项目未被勾选，它也可以正确计算总计：

function setTotal() {
 var jeans = parseInt(Cookies.get("jeans") || 0)
 var jeanJacket = parseInt(Cookies.get("jeanJacket") || 0)
 var belt = parseInt(Cookies.get("belt") || 0)

 Cookies.set("total", (jeans + jeanJacket + belt) || 0)
 $("#total").text(Cookies.get("total") || 0)
};

---

您可以在

中查看简化的演示，从不转储完整的代码，缩小问题范围，然后只添加相关代码，我更新了它并删除了CSS，以及HTML打开/关闭和模式，效果很好。实际上，为了创建一个新的示例，您可能需要CSS和HTML来重新创建您的问题。

$（此）.text（oneMore）

覆盖

.item

div的全部内容，包括img元素。（顺便提一句，编码风格说明：在Javascript中，行尾的分号（大部分）是可选的，但请慎重选择是否使用它们，不要随意乱扔。）永远不要转储完整的代码，缩小问题范围，然后只添加相关代码，我更新了它并删除了CSS，还有HTML打开/关闭和模式，它们工作得很好。实际上，为了创建一个新的应用程序，您可能需要CSS和HTML来重新创建您的问题。

$（this）。text（oneMore）

覆盖

.item

div的全部内容，包括img元素。（顺便说一句，编码风格说明：在Javascript中，行尾的分号（大部分）是可选的，但请慎重选择是否使用它们，不要随意乱扔。）啊，是的，你完全正确！我盯着这个看了一个多小时。最能伤害你的是那些简单的事情。谢谢你的洞察力。啊，是的，你完全正确！我盯着这个看了一个多小时。最能伤害你的是那些简单的事情。谢谢你的洞察力。