Question

我正在尝试在javascript中简化（或改进）我的代码。

我有

task.prototype.init = function (){

      //for loop and create bunch of links
            var size=document.createElement('a');
                size.innerHTML='test'
                size.id=value;
                size.onclick=this.changeSize.bind(this);

                body.appendChild(size);
}


task.prototype.changeSize = function(e){
  for(var i=0; i<e.target.parentNode.childNodes.length; i++){
   e.target.parentNode.childNodes[i].style.backgroundColor='white';
  }
 e.target.style.backgroundColor='red';
 return false;
}

我的HTML就像

<div>
   <a href='#' id='1'>test</a>
   <a href='#' id='2'>test</a>
   <a href='#' id='3'>test</a>
<div>

我的代码会将所有<a>链接的背景颜色更改为白色，并将选定的<a>标记设置为红色背景。它适合我需要的但我觉得它在我的changeSize函数中更漂亮。

有没有更好的方法来写它？非常感谢！

Answer 1

使用变量来避免意大利面条代码。

task.prototype.changeSize = function(e) {
    var target = e.target,
        nodes = e.target.parentNode.childNodes, node;

    for (var i = nodes.length, node = nodes[i]; i--;) {
        node.style.backgroundColor = 'white';
    }

    target.style.backgroundColor = 'red';
    return false;
};

甚至可能？：

task.prototype.changeSize = function(e) {
    var target = e.target,
        nodes = e.target.parentNode.childNodes, 
        i = nodes.length, node;

    for (node = nodes[i]; i-- && node.style.backgroundColor = 'white';);

    return !(target.style.backgroundColor = 'red');
};

简化javascript函数代码

1 个答案: