jQuery實(shí)現(xiàn)購物車

更新時間：2022年06月24日 15:15:45 作者：顧舟

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)購物車的具體代碼，供大家參考，具體內(nèi)容如下

1.描述

/*
? ? ? ? 描述：
? ? ? ? ? ? 1.點(diǎn)擊減號，input值自減，更新小計，更新總計
? ? ? ? ? ? 2.點(diǎn)擊加號，input值自加，更新小計，更新總計
? ? ? ? ? ? 3.點(diǎn)擊全選 設(shè)置li中的復(fù)選框按鈕狀態(tài)都為被選中狀態(tài)
? ? ? ? ? ? 4.點(diǎn)擊反選 本來被選中的復(fù)選框設(shè)為未選中，未選中的設(shè)為選中
? ? ? ? ? ? 5.點(diǎn)擊每一個復(fù)選按鈕，更新總計
? ? ? ? ? ? 6.函數(shù)getAll用于設(shè)置總計
*/

2.HTML布局

<div>
? ? ? ? <button>全選</button><button>反選</button>
? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 單價 <i>9.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小計: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 單價 <i>19.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小計: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 單價 <i>99.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小計: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 單價 <i>999.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小計: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <p>一共0件商品, 共計 0.00 元</p>
</div>

3.引入jQuery文件

<script src="js/jquery.js"></script>

4.購物車實(shí)現(xiàn)

4.1 點(diǎn)擊減號，input值自減，更新小計小計：單價*數(shù)量

$('.cut').click(function () {
? ? ? ? // 獲取對應(yīng)輸入框的值
? ? ? ? var num = $(this).next(':text').val();
? ? ? ? // console.log(num);
? ? ? ? if (num > 0) {
? ? ? ? ? ? // 自減
? ? ? ? ? ? num--;
? ? ? ? }
? ? ? ? // 更新輸入框的值
? ? ? ? $(this).next(':text').val(num);
? ? ? ? // 小計
? ? ? ? var add = Number($(this).prev().text() * num).toFixed(2);
? ? ? ? $(this).nextAll('span').text(add);
?
? ? ? ? getAll(); // 總計
? ? });?

4.2. 點(diǎn)擊加號，input值加1，更新小計小計：單價*數(shù)量

$('.add').click(function () {
? ? ? ? // 獲取對應(yīng)輸入框的值
? ? ? ? var num = $(this).prev().val();
? ? ? ? // 自加
? ? ? ? num++;
? ? ? ? // 更新輸入框的值
? ? ? ? $(this).prev().val(num);
? ? ? ? // 小計
? ? ? ? var add = Number($(this).siblings('i').text() * num).toFixed(2);
? ? ? ? $(this).nextAll('span').text(add);
?
? ? ? ? getAll(); // 總計
?
? ? });

4.3 點(diǎn)擊全選將li中的復(fù)選按鈕都設(shè)置成被選中狀態(tài) 更新總計

?$('button').eq(0).click(function () {
? ? ? ? // 所有的復(fù)選按鈕的都選中
? ? ? ? $(':checkbox').prop('checked', true);
?
? ? ? ? getAll(); // 總計
? ? });

4.4 點(diǎn)擊反選本來被選中的復(fù)選框設(shè)為未選中，未選中的設(shè)為選中更新總計

$('button').eq(1).click(function () {
? ? ? ? // 遍歷每一個復(fù)選框
? ? ? ? $(':checkbox').each(function (i, v) {
? ? ? ? ? ? // console.log(!v.cheacked);
? ? ? ? ? ? // $(v).prop('checked',!v.checked)
? ? ? ? ? ? // checked屬性進(jìn)行取反
? ? ? ? ? ? v.checked = !v.checked;
? ? ? ? });
?
? ? ? ? getAll(); // 總計
? ? });

4.5 點(diǎn)擊每一個復(fù)選按鈕，更新總計

$(':checkbox').click(getAll);

4.6 函數(shù)getAll用于設(shè)置總計

function getAll() {
? ? ? ? // 定義變量，分別用于存總數(shù)和總價
? ? ? ? var sum = 0;
? ? ? ? var allnum = 0;
? ? ? ? // 所有被選中的復(fù)選框
? ? ? ? var t = $(':checkbox:checked').each(function (i, v) {
? ? ? ? ? ? // console.log(Number($(v).nextAll('span').text()));
? ? ? ? ? ? // 所有被選中的復(fù)選框小計的總和
? ? ? ? ? ? sum += Number($(v).nextAll('span').text());
? ? ? ? ? ? //所有被選中的復(fù)選框的輸入框值的總和
? ? ? ? ? ? allnum += Number($(v).nextAll(':text').val());
? ? ? ? });
? ? ? ? // 設(shè)置p的內(nèi)容
? ? ? ? $('p').html('<p>一共' + allnum + '件商品, 共計 ' + sum.toFixed(2) + ' 元</p>');
? ? }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: