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

Question

图片描述

<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方法处于模糊概念。 抱歉是我思考不周。编辑了一次。

Answer 1

 /*** 颜色无货就禁用点击切换***/ 
var colorr=$("#color>li>a");
colorr.click(handleClick('#hiddenInvestmentTypeBig'));
/** 尺码 **/
var ruler=$("#ruler>li>a");
ruler.click(handleClick('#hiddenInvestmentTypeBig0'));

function handleClick(hiddenSelector) {
  return function switchSelect(e) {
    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();
      $(hiddenSelector).val($this.text());
    }
    return false;
  }
}

大概应该就是这么个意思，本质上是closure。

Answer 2

function的方法？
你是要把重复的可复用代码抽离封装成一函数吧？？
那你看下 你的代码中 两个click事件中 除了事件绑定的的dom节点，是不是都是一样的
那你就可以这样

btClick = function(dom){
    $(dom).click(function(){
        //TODO
    })
}
btClick(color)
btClick(ruler)

也可以这样

clickfn = function(dom){
    //todo if那一段
}
colorr.click(function(e){
clickfn(e.target)
｝）