三个几乎一样的函数应该怎么合并呢？

三个这样的函数样子差不多应该怎么合并呢这样写太麻烦了谢谢

oIpt1.onblur=function(){
    var oV1=oIpt1.value;
    if (oV1=='') {
      oIpt1.style.border='1px solid red';
    }
    else{
      oIpt1.style.border='';
    }
  }
oIpt2.onblur=function(){
    var oV2=oIpt2.value;
    if (oV2=='') {
      oIpt2.style.border='1px solid red';
    }
    else{
      oIpt2.style.border='';
    }
  }
oIpt3.onblur=function(){
    var oV3=oIpt3.value;
    if (oV3=='') {
      oIpt3.style.border='1px solid red';
    }
    else{
      oIpt3.style.border='';
    }
  }

var oIptOnblur = function (oIpt) {
  oIpt.onblur = function () {
    if (oIpt.value=='') {
      oIpt.style.border='1px solid red';
    }
    else{
      oIpt.style.border='';
    }
  }
}

oIptOnblur(oIpt1)
oIptOnblur(oIpt2)
oIptOnblur(oIpt3)

没有运行过不知道可不可以，反正避免重复的一个基本思路就是把变的部分放到参数里。

使用 GoF 策略模式封装一下！

初看以为提取‘变化’的部分作为参数即可，细看变化的部分也跟外部的元素一致，于是想到了下面的方法

var onblurHandle = function () {
    var value = this.value;
    if (value) {
        this.style.border = '1px solid red';
    } else {
        this.style.border = '';
    }
}

oIpt1.onblur = onblurHandle;
oIpt2.onblur = onblurHandle;
oIpt3.onblur = onblurHandle;

不过看最后绑定的时候的样子，貌似还有优化的空间

怎么没人想到用this。 - -！不就变成一个函数了吗

obj.onblur = function() {
    if(this.value == '') {
        this.style.border = '1px solid red';
    }
    ...
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="wrap-box">
        <input type="text" class="oInput" value="22222">
        <input type="text" class="oInput" value="">
        <input type="text" class="oInput" value="">
    </div>
</body>
<script>

var box = document.getElementsByClassName('wrap-box')[0];

var aInput = box.children;

for(var i=0; i<aInput.length; i++) {
    aInput[i].onblur = function() {
        if (this.value == '') {
            this.style.border = '1px solid red';
        } else {
            this.style.border = 0;
        }
    }
}

</script>
</html>

oIpt1.onblur=function(){
    var oV1=oIpt1.value;
    if (oV1=='') {
      oIpt1.style.border='1px solid red';
    }
    else{
      oIpt1.style.border='';
    }
  }
oIpt2.onblur=function(){
    var oV2=oIpt2.value;
    if (oV2=='') {
      oIpt2.style.border='1px solid red';
    }
    else{
      oIpt2.style.border='';
    }
  }
oIpt3.onblur=function(){
    var oV3=oIpt3.value;
    if (oV3=='') {
      oIpt3.style.border='1px solid red';
    }
    else{
      oIpt3.style.border='';
    }
  }

==》

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     window.onload=function(){
         var oIpt1=document.getElementById("charge1");
         var oIpt2=document.getElementById("charge2");
         var oIpt3=document.getElementById("charge3");

         oIpt1.onblur= onblurHandler;
         oIpt2.onblur= onblurHandler;
         oIpt3.onblur= onblurHandler;

         function onblurHandler(event){
             var target=event.target;
             var oV1= target.value;
             if (oV1=='') {
                 target.style.border='1px solid red';
             }
             else{
                 target.style.border='';
             }
         }
     }

    </script>
</head>
<body>
text1 <input id="charge1" type="text">
text2 <input id="charge2" type="text">
text2 <input id="charge3" type="text">
</body>
</html>

使用一个元素包含这三个元素，然后把这个事件定义在父元素上面，也就是通常说的事件代理或者事件委托，可以参考文章：http://www.cnblogs.com/craftsman-gao/p/4811845.html。关于事件代理原理，可以参考：http://www.cnblogs.com/craftsman-gao/p/4937700.html。

this, 封装. 不需要考虑那么多

直接用jQuery,获取元素，然后里面用$this

【热门文章】