如何制作和添加图标来切换外观
[英]How to make like and addtocart icons toggle appearance
问题描述
I'm trying to run a simple like and addtocart functionality whereby when the user clicks on the icons, it immediately toggles to a filled up or different color icon. 
我正在尝试运行一个简单的like和addtocart功能，当用户单击图标时，它会立即切换为填充或其他颜色的图标。 However, the parent div's link is also inherited so I added a stopPropagation to the script. 但是，父div的链接也被继承，因此我向脚本添加了stopPropagation。 I did not add in html & script code for #addtocart yet as the function is going to be similar to the #heart like icon. 我没有为#addtocart添加html＆脚本代码，因为该功能将类似于#heart like图标。
The issue is, the toggle is not working + my editor gives me an "Error: $undefined" msg even though I'm linking my javascript correctly. 问题是，切换开关不起作用+我的编辑器给我一个“错误：$ undefined”消息，即使我正确链接了JavaScript也是如此。 I would appreciate it if someone can help to point out where I went wrong. 如果有人可以帮助指出我哪里出了问题，我将不胜感激。 I would eventually like to add in the functionality whereby clicking on the icons will add the product to a user's wishlist or cart page, but I've yet to learn how to code back-end, so I just render the UI for now. 我最终希望添加功能，通过该功能单击图标会将产品添加到用户的愿望清单或购物车页面，但是我尚未学习如何对后端进行编码，因此我现在仅呈现UI。 However, if you can tell me how I can make the icons link to the user's wishlist or cart page and not inherit the parent's link, that would be great. 但是，如果您能告诉我如何使图标链接到用户的愿望清单或购物车页面，而不继承父项的链接，那将是很好的。
$(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>
2 个解决方案
解决方案1
1 已采纳 2018-05-03 09:15:54
I suggest you to use a class to change the color when you click. 我建议您单击时使用一个类来更改颜色。
See below a working snippet where I tried to respect your way of doing: 请参阅以下工作片段，我尝试尊重您的工作方式：
I added CSS variables to the body to make it work, and some comments where I added/modified things. 我在主体中添加了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>
I hope it helps. 希望对您有所帮助。
解决方案2
-1 2018-05-03 11:31:31
$ is undefined because you have the name inside brackets. $是未定义的，因为您的名字放在方括号内。 so you just have lots of variables with no name... 所以你只有很多没有名字的变量
$document.ready(function() {
$heart.click(function() {
$heart-liked.toggle('1000');
});
$heart.a.click(function(e) {
e.stopPropagation();
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.