首页 > jquery如果用户没有选择颜色 和尺码 ,点击立即购买 弹出提醒用户选择,怎么判断?

jquery如果用户没有选择颜色 和尺码 ,点击立即购买 弹出提醒用户选择,怎么判断?

  <!--选择颜色 尺码 数量 -->
<div class="detail-number">
 <dl class="c80">
     <dt class="m-dt">运费 :</dt>
     <dd>包邮(偏远地区除外)</dd>
 </dl>
<dl class="c80">
    <dt class="m-dt">颜色 :</dt>
    <dd>
        <ul class="list-inline color">
            <li><a href="">红色</a></li>
            <li class="disabled"><a href="">卡其色</a></li>
            <li><a href="">卡其色</a></li>
        </ul>
    </dd>
</dl>
<dl class="c80">
    <dt class="m-dt">尺码 :</dt>
    <dd>
        <ul class="list-inline color">
            <li><a href="">120</a></li>
            <li><a href="">130</a></li>
            <li><a href="">140</a></li>
        </ul>
    </dd>
</dl>
<dl class="c80">
    <dt class="m-dt">数量 :</dt>
    <dd>
        <div class="detail-cale">
            <a href="" class="detail-op min disabled">-</a>
                <input readonly="readonly" class="view-BuyNum" type="text" value="1">
            <a href="" class="detail-op max">+</a>
        </div>
</dl>
<dl>
    <dd>
        <div class="detail-card">
            <button type="button" class="btn btn-red">加入购物车</button>
            <button type="button" class="btn btn-blue">立即购买</button>
        </div>
    </dd>
</dl>
</div>

如果用户没有选择颜色 和尺码 ,点击立即购买 弹出提醒用户选择。
颜色和尺码我html结构是 ul>li>a写的。
怎么判断出来用户没选择
新人请教下。


总有存储尺寸和颜色的变量吧,不论是后端还是前端,点立即购买校验一下这些变量(必选的)是否至少有一个为空。


我的想法是 在js中设置下参数 如: var config="{ color:'', size:''}", 点击按钮的时候设置其参数,最后确认的时候判断这两个参数是否为空就好了。


颜色或者尺寸应用的ul,li这样的吧,或者a标签,在页面加一个隐藏控件,默认值0,点击颜色的时候取出点击的颜色id,赋值给隐藏控件,点击购买判断需要处理的颜色的隐藏控件的数值是不是0,是0说明没选择颜色还
如:<input type="hidden" id="hiddenInvestmentTypeBig" value="" />
JS:`

//大类切换 
$("#investmentTypeBig ul li").click(function () {
    $("#investmentTypeBig ul li").each(function () {
        $(this).attr("class", "tb");
    });
    $(this).attr("class", "ta");
    $("#hiddenInvestmentTypeBig").val($(this).attr("id"));  
});`

我写的这个是个例子,jQuery处理点击颜色的li的时候,取出li的颜色id,赋给input hidden即可
点击发布或者提交的时候,判断 hiddenInvestmentTypeBig 控件数值是否为空,为空说明没选择大类,颜色
我写的是简单思路,希望对你有帮助


我的思路是,给每个li加上一个value值和onclick事件,点击之后,根据当前组选中情况改变值,最后提交时,检查每一组的li是否有被选中的,如果没有,弹出提示框。


遍历所有的非disable的颜色和尺码,如果颜色和尺码都有hasClass('点击后变化的样式')那么就不弹窗,否则弹窗。


很简单,颜色和尺码分别用一个变量存储,初始化为空,点击购买的时候判断这两个变量是否都不为空就行啦。
补充一下,最好不要对每个li都添加点击事件,用事件代理就行了,触发事件就是给上述两个变量赋值的过程。


提交订单前校验:
$(尺寸).hasClass('.active').length>0


你可以给选中的状态定义一个class=“on”,判断有on就跳过,没有就提醒

【热门文章】
【热门文章】