javascript - 如何使like和addtocart图标切换外观
问题描述
我正在尝试运行一个简单的 like 和 addtocart 功能,当用户单击图标时,它会立即切换到填充或不同颜色的图标。但是,父 div 的链接也被继承,所以我在脚本中添加了 stopPropagation。我还没有为#addtocart 添加html 和脚本代码,因为该功能将类似于#heart like 图标。
问题是,切换不起作用+我的编辑器给了我一个“错误:$ undefined”的消息,即使我正确地链接了我的javascript。如果有人可以帮助指出我哪里出错了,我将不胜感激。我最终想添加功能,通过单击图标将产品添加到用户的愿望清单或购物车页面,但我还没有学习如何编写后端代码,所以我现在只渲染 UI。但是,如果您能告诉我如何使图标链接到用户的愿望清单或购物车页面,而不是继承父级的链接,那就太好了。
$(document).ready(function() {
$('#heart').click(function() {
$('#heart--liked').toggle('1000');
});
$("#heart a").click(function(e) {
//do something to stop link # from loading
e.stopPropagation();
});
});
.product__list__item {
border-radius: 2px;
background-color: var(--pure-white);
border: solid 1px var(--dark-grey);
}
.product__list__item--description {
padding: 1.5rem;
text-align: left;
}
.product__list__item h3 {
margin-bottom: .75rem;
position: relative;
display: block;
}
.product__list__item--icons {
display: inline-block;
float: left;
padding-top: 5px;
}
.product__list__item--icons a {
color: var(--middle-grey);
}
.product__list__item--icons a:hover {
color: var(--dark-grey);
}
#heart--liked {
display: none;
transition: .2s;
}
#addtocart {
margin-left: 10px;
}
.product__list__item--price {
display: inline-block;
float: right;
color: var(--dark-gray);
font-size: 1.5rem;
text-align: right;
margin-top: 50px;
}
.price--hot {
color: var(--crimson-red);
}
.price--display {
color: var(--pompeian-pink);
}
.product__list__item--description h3 sup {
font-size: .875rem;
padding: 5px;
text-transform: uppercase;
vertical-align: super;
}
.price__sale {
text-decoration: line-through;
font-size: 1.25rem;
color: var(--highlight-gray);
margin-left: 5px;
vertical-align: sub;
}
.product__list__item--description:after {
content: "";
display: table;
clear: both;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
</head>
<body>
<div class="product__list__item">
<a href="#" class="image-container">
<div class="image-container__wrapper">
<div class="image-container--mask">
<h4>View details</h4>
</div>
<img src="https://foter.com/photos/235/design-tree-home-acapulco-lounge-chair-yellow-1.jpg?s=pi" alt="yellow chair">
</div>
<div class="product__list__item--description">
<h3>Yellow Chair<sup class="price--hot">Clearance!</sup></h3>
<div class="product__list__item--icons">
<span id="heart"><a href=" "><i class="far fa-heart fa-2x"></i><i id="heart--liked" class="fas fa-heart fa-2x"></i></a></span>
<span id="addtocart"><a href=" "><i class="fas fa-cart-plus fa-2x"></i></a></span>
</div>
<div class="product__list__item--price price--hot">$189
<sub class="price__sale">$109</sub>
</div>
</div>
</a>
</div>
</body>
</html>
解决方案
我建议您在单击时使用一个类来更改颜色。
请参阅下面的一个工作片段,其中我试图尊重您的工作方式:
我将 CSS 变量添加到正文以使其工作,以及一些我添加/修改内容的注释。
$(document).ready(function() {
// Specific code for the heart fill toggle
$("#heart--liked").click(function(e) {
$(this).toggleClass("far").toggleClass("fas"); // Toggle the filling !
});
// Action when click on a link (color)
$(".product__list__item--icons a").click(function(e) {
e.preventDefault(); // Modified: stop link # from loading (Why using link then?)
$(this).toggleClass("selected"); // Toggle the colored class !
});
});
.product__list__item {
border-radius: 2px;
background-color: var(--pure-white);
border: solid 1px var(--dark-grey);
}
.product__list__item--description {
padding: 1.5rem;
text-align: left;
}
.product__list__item h3 {
margin-bottom: .75rem;
position: relative;
display: block;
}
.product__list__item--icons {
display: inline-block;
float: left;
padding-top: 5px;
}
.product__list__item--icons a {
color: var(--middle-grey);
}
.product__list__item--icons a:hover {
color: var(--dark-grey);
}
/* Added the two below */
.product__list__item--icons .selected {
color: var(--light-pink);
}
.product__list__item--icons .selected:hover {
color: var(--pink);
}
#heart--liked {
/*display: none; REMOVED */
transition: .2s;
}
#addtocart {
margin-left: 10px;
}
.product__list__item--price {
display: inline-block;
float: right;
color: var(--dark-gray);
font-size: 1.5rem;
text-align: right;
margin-top: 50px;
}
.price--hot {
color: var(--crimson-red);
}
.price--display {
color: var(--pompeian-pink);
}
.product__list__item--description h3 sup {
font-size: .875rem;
padding: 5px;
text-transform: uppercase;
vertical-align: super;
}
.price__sale {
text-decoration: line-through;
font-size: 1.25rem;
color: var(--highlight-gray);
margin-left: 5px;
vertical-align: sub;
}
.product__list__item--description:after {
content: "";
display: table;
clear: both;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
</head>
<body style="--middle-grey: #888; --dark-grey: #444; --light-pink: #ffb6c1; --pink: #dd888b;">
<div class="product__list__item">
<a href="#" class="image-container">
<div class="image-container__wrapper">
<div class="image-container--mask">
<h4>View details</h4>
</div>
<img src="https://foter.com/photos/235/design-tree-home-acapulco-lounge-chair-yellow-1.jpg?s=pi" alt="yellow chair">
</div>
<div class="product__list__item--description">
<h3>Yellow Chair<sup class="price--hot">Clearance!</sup></h3>
<div class="product__list__item--icons">
<span id="heart"><a href=" "><i id="heart--liked" class="far fa-heart fa-2x"></i></a></span>
<span id="addtocart"><a href=" "><i class="fas fa-cart-plus fa-2x"></i></a></span>
</div>
<div class="product__list__item--price price--hot">$189
<sub class="price__sale">$109</sub>
</div>
</div>
</a>
</div>
</body>
</html>
我希望它有所帮助。
推荐阅读
- css - 查询交互式报告失败并突出显示行 css 条件
- c++ - 如何从文件中读取数据并将文件中的名称存储在一个向量中,并将文件中的分数存储在另一个向量中?
- python - 文本文件读取偏移与python中seek和tell定义的块不一致
- swift - 如何在 Xcode 中使用 Swift 链接多个 collada 动画?
- javascript - Django Rest Framework 和 React 前端:如何防止未经授权的用户在获取图像 URL 时查看私人图像?
- android - 将 mimetype 'application/octet-stream' 与 SAF 选择器一起使用适用于本地文件,但不适用于 Google Drive 中的相同文件
- javascript - 无法读取 register.js 上未定义错误的属性“映射”
- reactjs - useEffect 是否应该成为大数据处理的首选钩子?
- regex - RegExp 对象的性能
- java - 如何解决找不到与包名称匹配的客户端'