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
>
var
giftValue;
$(
"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
() {
var
val
=
$(
'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
() {
var
val
=
$(
'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
() {
var
val
=
$(
'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
() {
var
val
=
$(
'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
>
大概可以实现这样的步骤
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
