다양한 제품 디스플레이를 위한 JavaScript 개발 장바구니 튜토리얼
여러 상품 표시
위에 소개된 예는 하나의 상품을 표시하는 것입니다. class="shop2" div 전체를 복사하면 + 또는 -를 클릭해도 문제가 발생합니다. 이는 우리의 트리거 이벤트가 모두 첫 번째 제품을 대상으로 하고 보편적이지 않기 때문입니다. 따라서 예제를 변환해야 합니다
먼저 함수의 함수를 사용합니다. 모든 변수는 다음과 같이 전달됩니다. parameters
//+버튼 누르기
function add(text,price,subtotal){
//현재 페이지 번호 가져오기
var num =document.getElementById( text).value;
//수량에 1을 추가한 다음 수량을 표시하는 <inpue>의 value 속성에 할당합니다
++num;
document.getElementById( text).value=num;
//현재 페이지의 수량을 구하고, 수량을 곱하여 소계가 속한 div의 페이지 표시 내용에 할당
var Price= document.getElementById (가격). - 버튼
function minus(text,price,subtotal){
var num=document.getElementById(text).value;
//수량이 음수인지 판단
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//현재 페이지의 내용을 가져옵니다. 수량에 수량을 곱한 값을 소계가 속한 div의 페이지 표시 내용에 할당합니다.
//num을 다시 할당하는 것은 다음과 같은 상황을 배치하는 것입니다. num=-1 발생
var num=document.getElementById(text).value;
var Price=document.getElementById(price).innerHTML;
document.getElementById(소계).innerHTML= Price*num;
}
다른 두 함수도 유사합니다. 커서가 초점을 벗어난 후
functionchange(text,price,subtotal){
/ /사용자 입력이 숫자가 아닌지 확인합니다. 그렇다면 사용자에게 상기시킵니다
if( isNaN(document.getElementById(text).value)){
Alert("숫자를 입력하세요");
document.getElementById(text).value=1;
}
//id="text"
로 입력 상자의 값을 가져옵니다. var num=document.getElementById(text).value;
//제품 가격 가져오기
var 가격=document .getElementById(price).innerHTML;
//소계 출력
document.getElementById(subtotal).innerHTML=price *num;
}
function delect(shop2){
//id="shop"인 div 삭제
document.body.removeChild(document.getElementById(shop2));
}
그런 다음 이벤트가 발생하면 두 제품에 관련된 모든 ID를 서로 다르게 변경합니다. value
완전한 코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>简易购物车</title>
<meta charset="utf-8" />
<style>
.shop{
width:400px;
background-color:#f0f0f0;
text-align:center;
}
.shop2{
text-align:center;
clear:both;
border:1px solid black;
height:21px;
}
.goods{
float:left;
width:100px;
}
.price{
float:left;
width:50px;
}
.number{
float:left;
width:110px;
}
.subtotal{
float:left;
width:50px;
margin-top:2px;
}
.delete{
float:left;
width:35px;
margin-left:5px;
}
.text{
width: 22px;
text-align:center;
}
</style>
<script >
//按下+按钮
function add(text,price,subtotal){
//取出当前页面的数量
var num=document.getElementById(text).value;
//将数量加一然后再赋值给显示数量的<inpue>中的value属性
++num;
document.getElementById(text).value=num;
//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容
var price=document.getElementById(price).innerHTML;
var subtotal=price*num;
document.getElementById(subtotal).innerHTML=price*num;
}
//按下-按钮
function minus(text,price,subtotal){
var num=document.getElementById(text).value;
//判断数量是不是负数
if(--num<1){
document.getElementById(text).value=0;
}else{
document.getElementById(text).value=num
}
//取出当前页面的数量，与数量相乘，赋值给小计所属的div的页面显示内容
//给num重新赋值是放置出现num=-1情况
var num=document.getElementById(text).value;
var price=document.getElementById(price).innerHTML;
document.getElementById(subtotal).innerHTML=price*num;
}
//用户在<input>框中改变数字时，光标失焦后触发change()函数
function change(text,price,subtotal){
//判断用户输入的是否为非数字，是则提醒用户
if(isNaN(document.getElementById(text).value)){
alert("请输入数字");
document.getElementById(text).value=1;
}
//取得id="text"的input框的value值
var num=document.getElementById(text).value;
//取得商品价格
var price=document.getElementById(price).innerHTML;
//将小计输出出去
document.getElementById(subtotal).innerHTML=price*num;
}
function delect(shop2){
//删除id="shop"的这个div
document.body.removeChild(document.getElementById(shop2));
}
</script>
</head>
<body>
<!--购物车标题-->
<div class="shop">
<div class="title">简易购物车</div>
<div class="goods">商品</div>
<div class="price">单价</div>
<div class="number">数量</div>
<div class="subtotal">小计</div>
<div class="delete">操作</div>
</div>
<!--商品内容-->
<div class="shop2" id="shop2">
<form>
<div class="goods">小米MIX </div>
<div class="price" id="price2">5000</div>
<div class="number">
<input type="button" value="-" onclick="minus('text2','price2','subtotal2')"/>
<input type="text" value="1" class="text" id="text2" onblur="change('text2','price2','subtotal2')"/>
<input type="button" value="+" onclick="add('text2','price2','subtotal2')"/>
</div>
<div class="subtotal" id="subtotal2">5000</div>
<div class="delete" onclick="delect('shop2')"><a href="#">删除</a></div>
<form>
</div>
<div class="shop2" id="shop3">
<form>
<div class="goods">iphone 8 </div>
<div class="price" id="price3">6000</div>
<div class="number">
<input type="button" value="-" onclick="minus('text3','price3','subtotal3')"/>
<input type="text" value="1" class="text" id="text3" onblur="change('text3','price3','subtotal3')"/>
<input type="button" value="+" onclick="add('text3','price3','subtotal3')"/>
</div>
<div class="subtotal" id="subtotal3">5000</div>
<div class="delete" onclick="delect('shop3')"><a href="#">删除</a></div>
<form>
</div>
</body>
</html>참고: 우리 페이지에는 아직 불완전한 부분이 많습니다. 예를 들어 새로 고치면 이전에 선택한 정보가 초기화되지 않은 상태가 됩니다. 사용자 선택, 전체 선택 기능 없음, 제품 사진 표시 없음 등을 기억하세요. 다음 버전에서 개선하겠습니다
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
