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

Question

  <!--选择颜色 尺码 数量 -->
<p 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>
        <p 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>
        </p>
</dl>
<dl>
    <dd>
        <p class="detail-card">
            <button type="button" class="btn btn-red">加入购物车</button>
            <button type="button" class="btn btn-blue">立即购买</button>
        </p>
    </dd>
</dl>
</p>

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

Answer 1

颜色或者尺寸应用的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 控件数值是否为空，为空说明没选择大类，颜色
我写的是简单思路，希望对你有帮助

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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