您的位置:首页 > 其它

jq仿淘宝选择产品颜色尺码

2017-03-13 09:41 239 查看
$('.slide_color').click(function () {
$('.slide_color').eq($(this).index()).toggleClass('this_color').siblings('.slide_color').removeClass('this_color');
$('#selected_color').html($(this).html());
$('.color').html($(this).html()+',');
if ($('.slide_color').hasClass('this_color')==false)
{
$('#selected_color').html('请选择颜色');
}
})
//尺寸选择
$('#slide_size span').click(function () {
$('#slide_size span').eq($(this).index()).toggleClass('this_color').siblings().removeClass('this_color');
$('#selected_size').html($(this).html());
$('.size').html($(this).html());
if ($('#slide_size span').hasClass('this_color')==false)
{
$('#selected_size').html('请选择尺寸');
}
})

//关闭弹窗判断用户的选择状态

$('#clo_btn').click(function () {
$('#slide').slideUp();
if ($('.slide_color').hasClass('this_color')==false&&$('#slide_size span').hasClass('this_color'))
{
$('.color').css('display','none');
$('.size').css('display','none');
$('.plesel').html('请选择 颜色分类')
}
else if ($('#slide_size span').hasClass('this_color')==false&&$('.slide_color').hasClass('this_color'))
{
$('.color').css('display','none');
$('.size').css('display','none');
$('.plesel').html('请选择 尺寸大小')
}
else if ($('.slide_color').hasClass('this_color')&&$('#slide_size span').hasClass('this_color'))
{
$('.plesel').html('已选择:')
$('.color').css('display','inline-block');
$('.size').css('display','inline-block');
}
else
{
$('.color').css('display','none');
$('.size').css('display','none');
$('.plesel').html('请选择 颜色分类 尺寸大小')
}
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: