JQuery는 장바구니 추가, 삭제, 정산 기능을 구현합니다.
이 글은 JQuery를 기반으로 장바구니 기능을 추가, 삭제, 정산하는 예시를 주로 소개하고 있으니 관심 있는 분들이 참고하시면 좋을 것 같습니다.
장바구니 정산이 어려운 부분이라는 걸 얼마전에 알았고, 인터넷에서도 몇개 찾아봤는데, 플러그인 말고도 인터넷에 반제품만 있는 것도 있더라구요. 그리고 효과 삭제, 또 하나는 결제 기능만 있는데 좀처럼 보기 힘든 장바구니 효과가 통합되어 있어서 모두가 볼 수 있도록 직접 작성했어요
(추가 효과는 포함되어 있지 않아서 애니메이션을 쓰기엔 너무 게으릅니다.) 효과 있으니 그냥 보세요)
HTML 부분
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<p id="banner"></p>
<p id="container">
<ul>
<li num="1"><img src="images/1.jpg"/><span class="things_name">2014年春季爆品A<p>$<i>10</i><span class="buy">点击购买</p></li>
<li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B<p>$<i>20</i><span class="buy">点击购买</p></li>
<li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C<p>$<i>30</i><span class="buy">点击购买</p></li>
<li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D<p>$<i>40</i><span class="buy">点击购买</p></li>
</ul>
</p>
<p id="carlist">
<p class="car">
<p>
<span class="carLogo"><span><img src="images/car.png"/>
<span class="txt">购<br />物<br />车
</p>
</p>
<p class="list">
<!--此处添加动态元素-->
<p class="total">
<span>总价：<span>0元
</p>
</p>
</p>
<script type="text/javascript">
function view(){
return{
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
};
}
document.body.style.height=view().h+"px";
</script>
</body>
</html>JS 부분
$(function(){
var mark=0;
$(".car").on("click",function(){
if(mark==0){
$("#carlist").animate({marginRight:"0px"},500)
mark=1;
}else{
$("#carlist").animate({marginRight:"-260px"},500)
mark=0
}
})
//点击购买按钮添加至购物车
var buyButton=$(".buy");
buyButton.on("click",BuyClick)
function BuyClick(){
var thingsName=$(this).parents("li").find(".things_name").text();
var thingsPrice=$(this).parent().find("i").text();
var thingsImage=$(this).parents("li").find("img").attr("src");
var kNum=$(this).parents("li").attr("num")
var Geshu=1;
$(this).off("click").text("已经添加至购物车");
$(".list").append('<p class="select things" num='+kNum+'><img src='+thingsImage+'/><p class="name">'+thingsName+'</p><p class="price">$<i>'+thingsPrice+'</i></p><ul class="caozuo"><li class="zengjian"><span class="minus">-<span>1<span class="add">+</li><li class="del">删除</li></ul></p>');
countTotalPrice();
totalGeshu();
//点击加号添加商品个数
$(".add").off("click").on("click",function(){
Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text())
Geshu++
$(this).parent().find("span:nth-of-type(2)").text(Geshu)
countTotalPrice();
totalGeshu();
})
//动态生成的元素点击减号减少商品个数
$(".minus").off("click").on("click",function(){
Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text());
if(Geshu>1){
Geshu--;
$(this).parent().find("span:nth-of-type(2)").text(Geshu)
}else{
Geshu==1;
}
countTotalPrice();
totalGeshu();
})
//删除购物车内的商品
var del=$(".del");
del.each(function(){
$(this).off("click").on("click",function(){
var delName=$(this).parents(".things").find(".name").text();
$(this).parents(".things").remove();
countTotalPrice();
totalGeshu();
var oldBtn=$("#container ul li").find("span:contains("+delName+")").parents("li").find(".buy")
oldBtn.on("click",BuyClick).text("点击购买")
})
})
//计算总价函数
function countTotalPrice(){
var totalPrice=0,listThings=$(".list").find(".things");
for (var i=0;i<listThings.length;i++) {
var this_geshu=parseInt(listThings.eq(i).find(".zengjian span:nth-of-type(2)").text());
var this_price=parseInt(listThings.eq(i).find(".price i").text());
totalPrice+=this_geshu*this_price;
}
$(".total span").eq(1).text(totalPrice);
totalGeshu();
}
//购物车上的商品总数
function totalGeshu(){
var listThings=$(".list").find(".things");
if (listThings.length>0) {
var totalGeshu=0;
listThings.each(function(){
var this_geshu=parseInt($(this).find(".zengjian span:nth-of-type(2)").text());
totalGeshu+=this_geshu;
})
$(".carLogo span").html(totalGeshu)
} else{
$(".carLogo span").css("display","none")
}
}
}
})관련 추천 :
jQuery는 Tmall 장바구니 애니메이션 효과 예시 공유를 시뮬레이션합니다.
JavaScript를 사용하여 간단한 장바구니 예시 공유 구현
AngularJS는 장바구니 전체 선택 및 역선택 기능 예제 공유를 구현합니다.
위 내용은 JQuery는 장바구니 추가, 삭제, 정산 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7564
15
1386
52
87
11
61
19
28
100
inetpub 폴더를 삭제할 수 있나요? C 드라이브의 inetpub 폴더를 빠르게 삭제하는 방법
Mar 13, 2024 pm 02:00 PM
컴퓨터의 C 드라이브에 메모리를 많이 차지하는 inetpub 폴더가 있는 것으로 나타났습니다. 이 inetpub 폴더는 무엇인가요? 바로 삭제가 가능한가요? 실제로 inetpub는 IIS 서버의 폴더입니다. IIS의 전체 이름은 인터넷 정보 서비스(Internet Information Services)입니다. 웹 사이트를 구축하고 디버깅하는 데 사용할 수 있으며, 필요하지 않으면 제거할 수 있습니다. 구체적인 방법은 다음과 같습니다. 1. 시작 메뉴를 마우스 오른쪽 버튼으로 클릭하고 "프로그램 및 기능"을 선택합니다. 2. 실행 후 "Windows 기능 켜기/끄기"를 클릭합니다. 3. Windows 기능 목록에서 II를 선택 취소합니다.
Xiaohongshu 메모를 삭제하는 방법
Mar 21, 2024 pm 08:12 PM
Xiaohongshu 메모를 삭제하는 방법 Xiaohongshu 앱에서 메모를 편집할 수 있습니다. 다음으로 편집기는 Xiaohongshu 메모 삭제 방법에 대한 사용자 사진과 텍스트를 가져옵니다. 보세요! Xiaohongshu 사용 튜토리얼 Xiaohongshu 메모 삭제 방법 1. 먼저 Xiaohongshu 앱을 열고 메인 페이지로 들어가서 오른쪽 하단에 있는 [Me]를 선택하여 특별 영역으로 들어갑니다. 2. 그런 다음 내 영역에서 다음과 같이 메모 페이지를 클릭합니다. 3. 노트 페이지에 들어가서 오른쪽 상단에 있는 [점 3개]를 클릭합니다. 4. 마지막으로 기능 표시줄이 하단에 확장되고 [삭제]를 클릭하여 완료합니다.
WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요?
Apr 08, 2024 am 11:41 AM
1. 우선, 누군가를 영구 차단 및 삭제하고 영구 추가하지 않는 것은 허위입니다. 상대방을 차단하고 삭제한 후 추가하려면 상대방의 동의만 있으면 됩니다. 2. 사용자가 누군가를 차단하면 상대방은 해당 사용자에게 메시지를 보낼 수 없고, 사용자의 친구 서클을 볼 수 없으며, 사용자와 통화할 수 없습니다. 3. 차단은 사용자의 WeChat 연락처 목록에서 상대방을 삭제하는 것을 의미하지 않습니다. 4. 상대방을 차단한 후 자신의 위챗 연락처 목록에서 상대방을 삭제한 경우, 삭제 후 복구할 수 있는 방법이 없습니다. 5. 상대방을 다시 친구로 추가하려면 상대방이 동의한 후 다시 친구를 추가해야 합니다.
어떤 폴더가 발견되었나요.000? found.000 폴더를 삭제할 수 있나요?
Mar 13, 2024 pm 08:52 PM
컴퓨터를 매일 사용하는 과정에서found.000 파일이 누락되어 손상되었다는 오류 메시지가 나타날 수 있습니다. 이found.000은 어떤 폴더입니까? 더 이상 쓸모가 없으면 삭제할 수 있나요? 이 파일을 모르는 분들이 너무 많아서found.000 폴더에 대해 자세히 알려드릴게요~ 1.found.000 폴더는 무엇인가요? 불법 종료로 인해 컴퓨터가 일부 또는 완전히 분실된 경우, 찾을 수 있습니다. "found.000"이라는 특수 폴더와 그 안에 포함된 ".chk" 확장자를 가진 파일은 시스템 파티션에 있는 지정된 디렉터리에 있습니다. 이 "fo
Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까?
Mar 21, 2024 pm 05:10 PM
인기 있는 소셜 전자상거래 플랫폼인 Xiaohongshu는 일상생활과 쇼핑 경험을 공유하기 위해 많은 사용자를 끌어 모았습니다. 때때로 당사는 개인 이미지를 더 잘 유지하거나 플랫폼 규정을 준수하기 위해 적시에 삭제해야 하는 일부 부적절한 콘텐츠를 실수로 게시할 수 있습니다. 1. Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 1. Xiaohongshu 계정에 로그인하고 개인 홈페이지에 들어갑니다. 2. 개인 홈페이지 하단의 '내 창작물' 옵션을 찾아 클릭하여 입장합니다. 3. "내 창작물" 페이지에서는 노트, 동영상 등 게시된 모든 콘텐츠를 볼 수 있습니다. 4. 삭제가 필요한 콘텐츠를 찾아 오른쪽에 있는 "..." 버튼을 클릭하세요. 5. 팝업 메뉴에서 "삭제" 옵션을 선택하세요. 6. 삭제 확인 후 해당 콘텐츠는 개인 홈페이지 및 공개 페이지에서 사라집니다.
hiberfil.sys 파일이란 무엇입니까? hiberfil.sys를 삭제할 수 있나요?
Mar 15, 2024 am 09:49 AM
최근 많은 네티즌들이 편집자에게 hiberfil.sys 파일이 무엇인지 문의했습니다. hiberfil.sys가 C 드라이브 공간을 많이 차지하고 삭제될 수 있나요? 편집자는 hiberfil.sys 파일을 삭제할 수 있음을 알려줄 수 있습니다. 아래에서 자세한 내용을 살펴보겠습니다. hiberfil.sys는 Windows 시스템의 숨겨진 파일이자 시스템 최대 절전 모드 파일입니다. 일반적으로 C 드라이브의 루트 디렉터리에 저장되며 크기는 시스템에 설치된 메모리 크기와 동일합니다. 이 파일은 컴퓨터가 최대 절전 모드일 때 사용되며, 복구 시 빠르게 이전 상태로 복원할 수 있도록 현재 시스템의 메모리 데이터를 담고 있습니다. 크기가 메모리 용량과 동일하므로 하드 드라이브 공간을 더 많이 차지할 수 있습니다. 동면
TikTok 채팅 기록을 완전히 삭제하는 방법
May 07, 2024 am 11:14 AM
1. Douyin 앱을 열고 인터페이스 하단의 [메시지]를 클릭한 후 삭제해야 하는 채팅 대화 항목을 클릭합니다. 2. 채팅 기록 중 하나를 길게 누른 후 [복수 선택]을 클릭하고 삭제하려는 채팅 기록을 선택하세요. 3. 해당 기록을 영구 삭제하려면 오른쪽 하단의 [삭제] 버튼을 클릭한 후 팝업창에서 [삭제 확인]을 선택하세요.
WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개
Mar 20, 2024 pm 08:31 PM
WeChat의 파일 전송 도우미는 모든 사용자가 사용할 수 있습니다. 일부 사용자는 이를 메모로 사용하여 일부 내용을 기록합니다. 그렇다면 WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 아래에서 자세히 소개해드리겠습니다. WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 답변: [WeChat]-[파일 전송 도우미 길게 누르기]-[이 채팅 삭제]. 구체적인 단계: 1. 먼저 홈 페이지에 들어간 후 [파일 전송 도우미]를 찾아 길게 누릅니다. 2. 그러면 팝업이 읽지 않음으로 표시되고 채팅을 상단에 고정합니다. 채팅을 표시하지 않고 채팅을 삭제합니다. 여기에서 [이 채팅 삭제]를 클릭할 수 있습니다.
