开发者社区> 问答> 正文

如何把jq写的代码再进一步优化一下!

<div class="detail-nation">
    <div class="attention-head">
        请选择你要的商品信息
    </div>
 <dl class="c80">
     <dt class="m-dt">运费 :</dt>
     <dd>包邮(偏远地区除外)</dd>
 </dl>
<dl class="c80">
    <dt class="m-dt">颜色 :</dt>
    <dd>
        <input type="hidden" id="hiddenInvestmentTypeBig" value="" />
        <ul class="list-inline color" id="color">
            <li class="disabled"><a href="" class="">红色</a></li>
            <li class=""><a href="">卡色</a></li>
            <li><a href="">卡其色</a></li>
        </ul>
    </dd>
</dl>
<dl class="c80">
    <dt class="m-dt">尺码 :</dt>
    <dd>
        <input type="hidden" id="hiddenInvestmentTypeBig0" value="" />
        <ul class="list-inline color" id="ruler">
            <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>
 /*** 颜色无货就禁用点击切换***/ 
var colorr=$("#color>li>a");
colorr.click(function(){
    var $this=$(this);
    if($this.parent().hasClass("disabled")){
        $(".disabled").unbind("click");
    }else if($this.hasClass("selected")){ //是再次点击,判断相关的值,若与当前值相等,就是取消。
        $this.removeClass("selected");
        $this.val();
        $("#hiddenInvestmentTypeBig").val("");
    }
    else{
        $this.addClass("selected").parent().siblings().children().removeClass("selected").parents().removeClass("nation");
        $(".attention-head").hide();
        $this.text();
        $("#hiddenInvestmentTypeBig").val($this.text());
    }
    return false;
});
/** 尺码 **/
var colorr=$("#ruler>li>a");
colorr.click(function(){
    var $this=$(this);
    if($this.parent().hasClass("disabled")){
        $(".disabled").unbind("click");
    }else if($this.hasClass("selected") ){  //是再次点击,判断相关的值,若与当前值相等,就是取消。
        $(this).removeClass("selected");
    }else{
        $this.addClass("selected").parent().siblings().children().removeClass("selected").parents().removeClass("nation");
        $(".attention-head").hide();
        $this.text();
        $("#hiddenInvestmentTypeBig0").val($this.text());
    }
    return false;
});

我写了颜色和尺码,但里面的代码重复。
据说用function方法可以把代码缩一半然后调用 并优化完美?
请问是怎么写出来?
小弟对function方法处于模糊概念。 抱歉是我思考不周。编辑了一次。

展开
收起
小旋风柴进 2016-05-30 14:07:43 2008 0
0 条回答
写回答
取消 提交回答
问答地址:
问答排行榜
最热
最新

相关电子书

更多
Python第五讲——关于爬虫如何做js逆向的思路 立即下载
JS 语言在引擎级别的执行过程 立即下载
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务 立即下载