需求:
1,用户共有n个抽奖机会,点击每块消耗的机会数对应;
2,次数不足不能继续抽奖;
3,把抽取的结果展现在出来;
如下效果图:
js:代码:
$('.sum').on('click','.sub',function(){//点击减号
var $this = $(this),$val = $this.next(),$times = $('.uzai-user .nums i'),
$data = $this.parents('.sum').attr('data-nums'),
$pIndex = $this.parent().index(),
$html='';
if(($val.html()-0) <= 0){
return;
}else{
$val.html($val.html()-1);
$times.html($times.html()-0 + ($data-0));
$(this).parents('.sum').siblings('.explains').find('b').eq($pIndex).attr('data-index',$(this).next().html());
$('.explains b').each(function(){
if($(this).attr('data-index')-0 >0){
$html += $(this).attr('data-index') +'个'+ $(this).attr('data-draws') +'+';
}
});
$('.uzai-luck .connect h2 b').html($html.substring(0,$html.length-1));
}
}).on('click','.add',function(){//点击加号
var $this = $(this),$val = $this.prev(),$times = $('.uzai-user .nums i'),
$data = $this.parents('.sum').attr('data-nums'),
$pIndex = $this.parent().index(),
$html ='';
if(($times.html() - $data) >= 0){
$val.html($val.html()-0+1);
$times.html($times.html() - $data);
$(this).parents('.sum').siblings('.explains').find('b').eq($pIndex).attr('data-index',$(this).prev().html());
$('.explains b').each(function(){
if($(this).attr('data-index')-0 >0){
$html += $(this).attr('data-index') +'个'+ $(this).attr('data-draws') +'+';
}
});
$('.uzai-luck .connect h2 b').html($html.substring(0,$html.length-1));
}else{
alert('对不起,您剩余次数不足!')
}
});