html:
<div class="win winguFacai">
<div class="grey"></div>
<div class="cont">
<div class="contIn">
<h3>礼品选择</h3>
<div class="Inns">
<p class="title">奖品3选1</p>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="11" id="checkboxFiveInput11" name="facai" />
<label for="checkboxFiveInput11"></label>
</div>
<span>5500元携程任我行旅游礼品卡</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="12" id="checkboxFiveInput12" name="facai" />
<label for="checkboxFiveInput12"></label>
</div>
<span>西门子洗碗机</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="13" id="checkboxFiveInput13" name="facai" />
<label for="checkboxFiveInput13"></label>
</div>
<span>55000枚蜂币</span>
</div>
<a class="btn-linqu">立即领取</a>
</div>
</div>
<span type="button" class="close btn-close">X</span>
</div>
</div>
<div class="win winguHesui">
<div class="grey"></div>
<div class="cont">
<div class="contIn">
<h3>礼品选择</h3>
<div class="Inns">
<p class="title">奖品3选1</p>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="21" id="checkboxFiveInput21" name="hesui" />
<label for="checkboxFiveInput21"></label>
</div>
<span>Kindle Oasis阅读器 8G(2399元)</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="22" id="checkboxFiveInput22" name="hesui" />
<label for="checkboxFiveInput22"></label>
</div>
<span>松下电烤箱</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="23" id="checkboxFiveInput23" name="hesui" />
<label for="checkboxFiveInput23"></label>
</div>
<span>24000枚蜂币</span>
</div>
<a class="btn-linqu">立即领取</a>
</div>
</div>
<span type="button" class="close btn-close">X</span>
</div>
</div>
<div class="win winguXingyun">
<div class="grey"></div>
<div class="cont">
<div class="contIn">
<h3>礼品选择</h3>
<div class="Inns">
<p class="title">奖品3选1</p>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="31" id="checkboxFiveInput31" name="xingyun" />
<label for="checkboxFiveInput31"></label>
</div>
<span>飞利浦除螨仪吸尘器（1299元）</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="32" id="checkboxFiveInput32" name="xingyun" />
<label for="checkboxFiveInput32"></label>
</div>
<span>美的破壁机</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="33" id="checkboxFiveInput33" name="xingyun" />
<label for="checkboxFiveInput33"></label>
</div>
<span>13000枚蜂币</span>
</div>
<a class="btn-linqu">立即领取</a>
</div>
</div>
<span type="button" class="close btn-close">X</span>
</div>
</div>
<div class="win winguFuqi">
<div class="grey"></div>
<div class="cont">
<div class="contIn">
<h3>礼品选择</h3>
<div class="Inns">
<p class="title">奖品3选1</p>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="41" id="checkboxFiveInput41" name="fuqi" />
<label for="checkboxFiveInput41"></label>
</div>
<span>猫王蓝牙音响(399元）</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="42" id="checkboxFiveInput42" name="fuqi" />
<label for="checkboxFiveInput42"></label>
</div>
<span>美的空气炸锅</span>
</div>
<div>
<div class="checkboxFive f-left">
<input type="radio" value="43" id="checkboxFiveInput43" name="fuqi" />
<label for="checkboxFiveInput43"></label>
</div>
<span>4000枚蜂币</span>
</div>
<a class="btn-linqu">立即领取</a>
</div>
</div>
<span type="button" class="close btn-close">X</span>
</div>
</div>
四个radio组，根据value来区分它们
js:
<script>
vargiftValue;
$("a.enalbe").click(function()
{
$(this).parent().find('.chuzil').addClass('hammer_movel');
$(this).parent().find('.chuzir').addClass('hammer_move');
if($(this).parent().parent().hasClass('gu1')){
console.log('发财鼓')
$(".winguFacai,.winguFacai
.cont>div").delay(2000).fadeIn();
$("input:radio[name='facai']").change(function()
{
varval=$('input:radio[name="facai"]:checked').val();
giftValue=val;
});
}
if($(this).parent().parent().hasClass('gu2')){
console.log('贺岁鼓')
$(".winguHesui,.winguHesui
.cont>div").delay(2000).fadeIn();
$("input:radio[name='hesui']").change(function()
{
varval=$('input:radio[name="hesui"]:checked').val();
giftValue=val;
});
}
if($(this).parent().parent().hasClass('gu3')){
console.log('幸运鼓')
$(".winguXingyun,.winguXingyun
.cont>div").delay(2000).fadeIn();
$("input:radio[name='xingyun']").change(function()
{
varval=$('input:radio[name="xingyun"]:checked').val();
giftValue=val;
});
}
if($(this).parent().parent().hasClass('gu4')){
console.log('福气鼓')
$(".winguFuqi,.winguFuqi
.cont>div").delay(2000).fadeIn();
$("input:radio[name='fuqi']").change(function()
{
varval=$('input:radio[name="fuqi"]:checked').val();
giftValue=val;
});
}
});
$(".btn-linqu").click(function()
{
console.log(giftValue);
$('.chuzi').removeClass('hammer_movel');
$('.chuzi').removeClass('hammer_move');
if(giftValue==11){
$(".win,.win
.cont>div").hide();
$(".winShiwu,.winShiwu
.cont>div").show();
$('.shiwuName').html('携程任我行旅游礼品卡');
$('.shiwuImg
img').attr('src','../../public/activity/january/images/gift-lipinka.png');
}
if(giftValue==12){
$(".win,.win
.cont>div").hide();
$(".winShiwu,.winShiwu
.cont>div").show();
$('.shiwuName').html('西门子洗碗机');
$('.shiwuImg
img').attr('src','../../public/activity/january/images/gift-xiwanji.png');
}
if(giftValue==13){
$(".win,.win
.cont>div").hide();
$(".winXuni,.winXuni
.cont>div").show();
$('.xuniName').html('55000');
}
if(giftValue==21){
$(".win,.win
.cont>div").hide();
$(".winShiwu,.winShiwu
.cont>div").show();
$('.shiwuName').html('Kindle
Oasis阅读器');
$('.shiwuImg
img').attr('src','../../public/activity/january/images/gift-kindle.png');
}
.......
.......
if(giftValue==42){
$(".win,.win
.cont>div").hide();
$(".winShiwu,.winShiwu
.cont>div").show();
$('.shiwuName').html('西门子洗碗机');
$('.shiwuImg
img').attr('src','../../public/activity/january/images/gift-zhaguo.png');
}
if(giftValue==43){
$(".win,.win
.cont>div").hide();
$(".winXuni,.winXuni
.cont>div").show();
$('.xuniName').html('4000');
}
});
</script>
大概可以实现这样的步骤