ジャンゴ13ショッピングモールプロジェクト
図1に示すように、単一の項目選択ロジック
([コード]ジャンゴ14ショッピングモールプロジェクトはすでに持っています)
1.1、最終結果は
1.2、HTML
何のクリックイベントは、パラメータC_is_select判断の上にフロントを出ていないとき
1.3、JS
クリックイベントがchangecart選択状態と送信中に入るために、非同期リクエスト/ AXF / changecart /クリックビューを介してデータを発生した場合
1.4、views.py
JSは、非同期要求を受信した後、データ処理は、送信された
ので、そのミドルウェアルーティングに加えchangecartを覚え、このステップは、ユーザのログイン状態を決定することであることを覚えて
ルート
2、カート、またはすべてを選択
2.1、ロジック
2.2、HTML
2.3、CSS
どこのすべてのコンテンツは、現在cart.cssここでいくつかのCSSレーンで修正追加された新しいall_selectは、ここにあります
/*底部图标*/
footer .cart span {
background: url(/static/img/cart_selected.png) no-repeat;
background-size: 0.513889rem;
}
footer .cart dd {
color: orange;
}
/*内容*/
#cart {
padding: 1.5rem 0;
z-index: +15;
width: 100%;
background: #fafafa;
overflow: hidden;
}
h3 {
text-align: center;
position: fixed;
width: 100%;
border-bottom: 0.04rem solid lightgray;
line-height: 1.5rem;
background: yellow;
top: 0;
z-index: +100;
}
.full > section {
background: lightpink;
}
.full > section > ul {
border: 0.2rem dashed lightgreen;
border-width: 0.1rem 0;
margin-bottom: 0.2rem;
}
.full > section > ul > li {
padding-left: 0.3rem;
line-height: 0.8rem;
font-size: 0.375rem;
}
.clear:after {
content: "";
display: block;
visibility: hidden;
clear: both;
height: 0;
}
.full > section > ul > li > div > p:last-child {
float: right;
width: 78%;
}
.full > section > ul > li > div > p:last-child > span {
padding: 0.15rem;
}
.infoJustify {
float: left;
width: 20%;
height: 0.8rem;
overflow: hidden;
text-align: justify;
}
.infoJustify b {
display: inline-block;
}
.change {
float: right;
padding-right: 0.2rem;
}
/*闪送超市*/
.bill {
line-height: 0.75rem;
position: relative;
border-bottom: 0.04rem solid lightgreen;
}
.bill > p {
padding: 0 0.3rem;
font-size: 0.3rem;
color: #d35a00;
}
.bill > p:first-child:before {
width: 0.2rem;
height: 0.3rem;
background: yellow;
content: ".";
color: yellow;
margin-right: 0.2rem;
}
.bill > a {
border: 0.05rem solid orangered;
position: absolute;
border-radius: 0.3rem;
padding: 0 0.3rem;
font-size: 0.35rem;
line-height: 0.65rem;
top: 0.2rem;
right: 0.5rem;
}
/*收货时间,收货备注*/
.delivery {
line-height: 1.5rem;
border-bottom: 0.04rem solid lightgray;
font-size: 0.4rem;
padding: 0 0.3rem;
}
.delivery > span:first-child {
padding-right: 0.3rem;
}
.delivery > span:nth-child(2) {
color: orangered;
}
.delivery > span:last-child {
float: right;
}
.delivery > input {
height: 0.8rem;
line-height: 0.8rem;
border-radius: 0.1rem;
border-width: 0.04rem;
width: 70%;
}
.menuList {
border-bottom: 0.04rem solid lightgray;
height: 2.5rem;
position: relative;
}
.confirm , .all_select{
padding: 0.95rem 0;
width: 15%;
height: 2.5rem;
display: inline-block;
box-sizing: border-box;
text-align: center;
float: left;
}
.confirm > span , .all_select> span{
box-sizing: border-box;
border: 0.04rem solid orange;
background: white;
display: inline-block;
width: 0.6rem;
height: 0.6rem;
overflow: hidden;
border-radius: 50%;
line-height: 0.6rem;
}
.confirm > span > span ,.all_select> span > span{
background: yellow;
font-size: 0.5rem;
display: block;
}
.menuList > a {
width: 84%;
display: inline-block;
font-size: 0.4rem;
line-height: 1rem;
}
.menuList > a > img {
margin-top: 0.25rem;
width: 25%;
height: 100%;
float: left;
}
.menuList > a > p {
width: 70%;
height: 1rem;
float: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*去除a标签的连接蓝色属性 text-decoration设置文本修饰属性*/
text-decoration: none;
color: #333;
}
.menuList > section {
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
height: 0.75rem;
border-radius: 1rem;
}
.menuList > section > button {
background: white;
border: 1px solid orange;
border-radius: 1111px;
color: red;
display: inline-block;
text-align: center;
line-height: 0.65rem;
font-weight: 900;
width: 0.75rem;
height: 0.75rem;
}
.menuList > section > span {
display: inline-block;
width: 0.5rem;
text-align: center;
line-height: 0.5rem;
font-size: 0.4rem;
}
.presenPrice:before {
content: "¥";
font-size: 0.33rem;
}
/*下单,付钱*/
.payTheBill {
height: 1.5rem;
position: relative;
}
.payTheBill .all_select {
width: 10%;
padding-top: 0.4rem;
padding-left: 0.4rem;
}
.payTheBill > p {
line-height: 1.5rem;
text-indent: 0.3rem;
}
.payTheBill > p > span:first-child {
padding-right: 0.8rem;
}
.payTheBill > p > span:last-child {
padding-left: 0.3rem;
color: red;
}
.payTheBill > p > span:last-child:before {
content: "¥";
font-size: 0.35rem;
}
.payTheBill > a {
padding: 0 0.7rem;
line-height: 1.5rem;
background: yellow;
position: absolute;
right: 0;
top: 0;
}
スクリーンショットではいくつかの変更:
2.4、JS
最初に(赤部分を添加)を添加しました
if (data["is_all_select"]) {
$(".all_select").find("span").find("span").html("√");
} else {
$(".all_select").find("span").find("span").html("");
}
第二の添加(赤が追加されます)
$(".all_select").click(function () {
var $all_select = $(this);
var select_list = [];
var unselect_list = [];
$(".confirm").each(function () {
var $confirm = $(this);
var cartid = $confirm.parents("li").attr("cartid");
if ($confirm.find("span").find("span").html().trim()) {
select_list.push(cartid);
} else {
unselect_list.push(cartid);
}
});
if (unselect_list.length > 0) {
$.getJSON("/axf/allselect", {"cart_list": unselect_list.join("#")}, function (data) {
console.log(data);
if (data["status"] === 200) {
// 所有的商品变成选中状态
$(".confirm").find("span").find("span").html('√');
// ”全选“变成选中状态
$all_select.find("span").find("span").html('√');
}
});
} else {
if (select_list.length > 0) {
$.getJSON("/axf/allselect", {"cart_list": select_list.join("#")}, function (data) {
console.log(data);
if (data["status"] === 200) {
// 所有的商品变成选中状态
$(".confirm").find("span").find("span").html('');
// ”全选“变成选中状态
$all_select.find("span").find("span").html('');
}
});
}
}
});
2.5、ビュー
1、(赤い部分が追加された)
2、(赤が追加されます)
def all_select(request):
cart_list = request.GET.get('cart_list')
cart_list = cart_list.split("#")
carts = Cart.objects.filter(id__in=cart_list)
for cart in carts:
cart.C_is_select = not cart.C_is_select
cart.save()
print(cart_list)
data = {
"status": 200,
}
return JsonResponse(data=data)