博客说明
文章内容输出来源：拉勾教育Java就业急训营
案例一：节点手风琴
<style>
tt {
display: none;/*隐藏元素*/
}
</style>
<body>
<test>
<ul>
<li>
<tl>
<dt>Test1</dt>
<tt>Test-1</tt>
<tt>Test-2</tt>
<tt>Test-3</tt>
<tt>Test-1</tt>
<tt>Test-2</tt>
<tt>Test-3</tt>
<tt>Test-1</tt>
<tt>Test-2</tt>
<tt>Test-3</tt>
</tl>
</li>
<li>
<tl>
<dt>Test2</dt>
<tt>Test2-1</tt>
<tt>Test2-2</tt>
<tt>Test2-3</tt>
<tt>Test2-1</tt>
<tt>Test2-2</tt>
<tt>Test2-3</tt>
<tt>Test2-1</tt>
<tt>Test2-2</tt>
<tt>Test2-3</tt>
</tl>
</li>
<li>
<tl>
<dt>Test3</dt>
<tt>Test3-1</tt>
<tt>Test3-2</tt>
<tt>Test3-3</tt>
<tt>Test3-1</tt>
<tt>Test3-2</tt>
<tt>Test3-3</tt>
<tt>Test3-1</tt>
<tt>Test3-2</tt>
<tt>Test3-3</tt>
</tl>
</li>
</ul>
</test>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("test dt").click(function () {
//所有的tt全部闭合上，除了自己的兄弟
$("tt").not($(this).siblings()).slideUp(500);
//对自己的兄弟的状态进行切换，显示的就闭合，闭合的就显示
$(this).siblings().slideToggle(500);
})
</script>
</body>
案例二：购物车
- html绘制简单table
<style>
.jian,.jia {
border: 1px solid #999;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none;
}
</style>
<body>
<table border="1" cellspacing="0" width="400px">
<tr>
<td>商品编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr>
<td>1001</td>
<td>炸香肠</td>
<td>3</td>
<td>
<a href="#" class="jian">-</a>
<span>1</span>
<a href="#" class="jia">+</a>
</td>
<td>3</td>
</tr>
<tr>
<td>1002</td>
<td>王八</td>
<td>10</td>
<td>
<a href="#" class="jian">-</a>
<span>1</span>
<a href="#" class="jia">+</a>
</td>
<td>10</td>
</tr>
<tr>
<td>1003</td>
<td>恐龙</td>
<td>1000</td>
<td>
<a href="#" class="jian">-</a>
<span>1</span>
<a href="#" class="jia">+</a>
</td>
<td>1000</td>
</tr>
</table>
<p style="width: 400px; text-align: right;">
总价：<b style="color: red;">1013</b> <button>提交订单</button>
</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/car.js"></script>
</body>
- 外部导入js(简洁美观)
$(".jia").click(function () {
//获取数量
var i = $(this).prev().text();
i++;
//增加后的数量
$(this).prev().text(i);
//获取单品单价
var x = $(this).parent().prev().text();
//计算单品总价
var cnt = x * i;
//单品总价赋值
$(this).parent().next().text(cnt);
getTotal();
})
$(".jian").click(function () {
var i = $(this).next().text();
i--;
if (i == 0) {
//询问用户，数量已经为0，是否删除该商品
if (confirm("是否删除该商品...")) {
$(this).parents("tr").remove();
getTotal();
}
}
else {
$(this).next().text(i);
//获取单品单价
var x = $(this).parent().prev().text();
//计算单品总价
var cnt = x * i;
//单品总价赋值
$(this).parent().next().text(cnt);
getTotal();
}
})
//计算所有产品的总价
//第一种方式
function getTotal() {
var sum = 0;//总价钱
var arr = $("tr:not(tr:first)").find("td:last");
for (var i = 0; i < arr.length; i++) {
sum += Number(arr[i].innerHTML);
}
$("b").text(sum);
}
//第二种方式
function getTotal() {
var sum = 0;//总价钱
//获取到数组后直接使用each进行遍历
$("tr:not(tr:first)").find("td:last").each(function(){
sum += Number($(this).text());
});
$("b").text(sum);
}