javascript - 如何把jq写的代码再进一步优化一下?
高洛峰
高洛峰 2017-04-10 17:06:28
[JavaScript讨论组]

图片描述

请选择你要的商品信息

运费 :
包邮(偏远地区除外)
颜色 :
尺码 :
数量 :

- +

 /*** 颜色无货就禁用点击切换***/ 
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方法处于模糊概念。 抱歉是我思考不周。编辑了一次。

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
大家讲道理
 /*** 颜色无货就禁用点击切换***/ 
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。

天蓬老师

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)
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号