一个自制的遮罩层弹窗，我想写一个删除购物车商品的方法，但是传递参数的时候不能传递到遮罩层上面去，传上去了只有一个固定的值，不是动态的，无论点击哪一个删除按钮，都是弹出一个固定的ID，不知道代码哪里出问题了还是这种思路不对，望大神们指点，谢谢
{php $bootstrap_type = 3;}
{template 'header'}
<style>
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
.container{padding-left:0 !important;padding-right:0 !important;}
.layui-form-checkbox>span{display:none;}
div{border:0px solid #000;}
.head_top{
width: 100%;
height: 50px;
line-height: 50px;
background: #FF6060;
margin-bottom: 5px;
padding: 0 5px;
/*color: #FFF;*/
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
z-index: 2000;
left: 0;
top: 0;
}
.mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
}
</style>
<div style="width:100%;min-height:500px;" class="big_div">
<div class="head_top">
<div style="width:100%;height:50%;">
<div style="width:33%;height:100%;float:left;line-height:40px;">
<a href="{$_W['siteroot']}app/index.php?i=2&c=entry&do=index&m=ewei_shopping" >
<img src="../addons/ewei_shopping/template/mobile/images/icon_home03.png" style="margin-top:10%;width:25%;margin-left:1%;"/>
</a>
</div>
<div style="width:33%;height:100%;float:left;text-align:center;color:#fff;font-size:1.6rem;">商品列表</div>
<div style="width:34%;height:100%;float:left;line-height:40px;"><img src="../addons/ewei_shopping/template/mobile/images/icon_ren03.png" style="margin-top:10%;width:25%;margin-left:73%;"/></div>
</div>
</div>
<div style="border:0px solid #000;height:auto;width:100%;" class="parent_div">
<div style="width:100%;height:92%;">
{loop $cart_goods $item}
<div style="width:100%;height:35vw;margin-top:2vw;border-bottom:1px solid #D1D1D1;" class="shangpin_div">
<div style="width:40%;height:100%;float:left;padding:5px;">
<div class="list" style="width:15%;height:100%;float:left">
<input type="checkbox" name='id[]' style="margin-top: 14vw;"/>
</div>
<div style="width:85%;height:100%;float:left;"><img src="{$_W['attachurl']}{$item['thumb']}" style="width:100%;height:100%;"/></div>
</div>
<div style="padding:5px;width:60%;height:100%;float:left;" >
<div style="width:100%;height:25%;line-height:10vw;font-size:1.7rem;">{$item['title']}</div>
<div style="width:100%;height:10%;"></div>
<div style="width:100%;height:25%;line-height:10vw;">￥<span class="price">{$item['marketprice']}</span> </div>
<div style="width:100%;height:40%;line-height:10vw;font-size:1.7rem">
<div style="width:70%;height:100%;float:left;margin-top: 10px;">
<div style="width:30%;height:100%;float:left;">
<img src="../addons/ewei_shopping/template/mobile/images/icon_-.png" class="min" style="width:65%;"/>
</div>
<div style="width:40%;height:100%;float:left;">
<input type="text" value="0" class="text_box" style="text-align:center;border:1px solid #ddd;background:#fff;height:65%;border-radius:0px;" />
</div>
<div style="width:30%;height:100%;float:left;text-align:right;">
<img src="../addons/ewei_shopping/template/mobile/images/add.png" class="add" style="width:65%;"/>
</div>
</div>
<div style="width:30%;height:100%;float:left;margin-top: 10px;"><img class="shanchu" src="../addons/ewei_shopping/template/mobile/images/delete.png" style="width:45%;margin-left:45%;" /></div>
</div>
</div>
</div>
<input type="hidden" value="http://{$_SERVER['HTTP_HOST']}/nengyuan/app/index.php?i=2&c=entry&do=shopcart&m=ewei_shopping&id={$item['id']}" class="url" />
{/loop}
</div>
</div>
<div style="background: #fff;position:fixed;bottom:0;border:0px solid #000;height:60px;padding:5px;width:100%;border-top:1px solid #ddd;margin-top:7vw;margin-bottom:0px;">
<div style="width:20%;height:100%;float:left;line-height:50px;text-align:center;">
<input type="checkbox" id="all"/>全选
</div>
<div style="width:60%;height:100%;float:left;">
<div style="height:50%;width:100%;padding-left:30%;" id="total">活动价：0.00</div>
<div style="height:50%;width:100%;padding-left:27%;">（共<span class="num_span"></span>件，不含运费）</div>
</div>
<div style="width:20%;height:100%;float:left;padding-top:2%;text-align:center;">
<button style="background:#FF6060;color:#fff;">结算</button>
</div>
</div>
<input type="hidden" value="{$item['id']}" name="id" />
<div id="mask" class="mask"></div>
<div class="zhezhao" style="display:none;background:#fff;width:265px;height:135px;z-index:9999;position:absolute;top:30%;left:13%;border-radius:10px;">
<div class="logout" style="color:#000;width:100%;height:60%;border-bottom:1px solid #CCCCCC;text-align:center;font-size:20px;line-height:85px;">
确定要删除此商品？
</div>
<div class="tuichu_btn" style="width:100%;height:40%;">
<div class="que_ding" data-id="{$item['id']}" style="width:50%;height:100%;float:left;text-align:center;font-size:20px;line-height:55px;border-right:1px solid #ccc;">确定</div>
<div class="qu_xiao" style="width:50%;height:100%;float:left;text-align:center;font-size:20px;line-height:55px;color:#FE605D;">取消</div>
</div>
</div>
</div>
<script type="text/javascript">
//兼容火狐、IE8
//显示遮罩层
function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width" ,$(document).width());
$("#mask").show();
}
//隐藏遮罩层
function hideMask(){
$("#mask").hide();
}
$(function(){
$(".shanchu").click(function(){
showMask();
center($(".zhezhao"));
$(".zhezhao").show();
})
$(".que_ding").click(function(){
hideMask();
$(".zhezhao").hide();
var index=$(this).index();
console.log(index);
var url = $('.url').val();
var id = $(this).attr("data-id");
console.log($(this));
console.log(url);
console.log(id);
console.log($(this).parents().prev().prev().find("input[name='id']").val());
$.ajax({
url:url,
data:{'id':id},
type:'get',
datatype:'json',
success:function(res){
}
})
})
$(".qu_xiao").click(function(){
//alert("11");
hideMask();
$(".zhezhao").hide();
//$(".logout").hide();
//$(".tuichu_btn").hide();
})
})
//弹窗居中
function center(obj) {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(obj).height();
var popupWidth = $(obj).width();
$(obj).css({
"position": "absolute",
"top": (windowHeight - popupHeight) / 2 + $(document).scrollTop(),
"left": (windowWidth - popupWidth) / 2
});
}
$("#all").click(function(){
if(this.checked){
$(".list :checkbox").prop("checked", true);
var goodsNum = $(this).parents().find('input[class*=text_box]').val();
var goodsPrice = $(this).parents().find('span[class*=price]').text();
console.log(goodsNum);
console.log(goodsPrice);
console.log($(this).parents());
}else{
$(".list :checkbox").prop("checked", false);
}
});
$(".add").click(function(){
var t = $(this).parent().parent().find('input[class*=text_box]');
t.val(parseInt(t.val())+1);
setTotal();
})
$(".min").click(function(){
var t = $(this).parent().parent().find('input[class*=text_box]');
t.val(parseInt(t.val())-1);
if(parseInt(t.val())<0){
t.val(0);
}
setTotal();
})
function setTotal(){
var s=0;
$(".shangpin_div").each(function(){
var goodsNum = $(this).find('input[class=text_box]').val();
var goodsPrice = $(this).find('span[class*=price]').text();
console.log(goodsNum);
//console.log(111);
//console.log($(this));
s += parseInt(goodsNum)*parseFloat(goodsPrice);
console.log($(this).find('input[class=text_box]').val());
//console.log($(this).find('span[class*=price]').text());
//console.log($(this).find('input[class=text_box]').val());
});
$("#total").html(s.toFixed(2));
}
var goods=$(".shangpin_div").length;
$(".num_span").text(goods);
</script> 最佳答案
