Question

如何减少此部件代码？我需要缩短它。

这是我很长时间的代码：

var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");

b1.onclick = function() {
  b1.style.background = "#0070b7";
  b1.style.color = "#fff";
  b2.style.background = "";
  b2.style.color = "";
  b3.style.background = "";
  b3.style.color = "";
  b4.style.background = "";
  b4.style.color = "";
  $( "#led1" ).show( "slow, linear" );
  $( "#led2" ).hide("slow, linear");
}

b2.onclick = function() {
  b1.style.background = "#efefef";
  b1.style.color = "#707173";
  b2.style.background = "#0070b7";
  b2.style.color = "#fff";
  b3.style.background = "";
  b3.style.color = "";
  b4.style.background = "";
  b4.style.color = "";
  $( "#led1" ).hide("slow, linear ");
  $( "#led2" ).show( "slow, linear " );
}

Answer 1

我能看到的最大优化是使用CSS类而不是手动设置javascript中每个元素的样式。例如：

.active {
   background-color: #efefef;
   color: #707173;
}

.inactive {
   background-color: #fff;
   color: #fff;
}

然后您的点击事件处理程序可以执行：

$('.active').removeClass('active');
$(this).addClass('active');

或类似的东西

Answer 2

通过使用Jquery的.css()函数而不是普通的JS element.style.attribute语法，我使它更短（更完整，更可读）。还在顶部定义了每个变量一次，以防止需要重新查询。这是我的尝试：

var b1 = $('#b1');
var b2 = $('#b2');
var b3 = $('#b3');
var b4 = $('#b4');
var led1 = $('#led1');
var led2 = $('#led2');

b1.click(function(){
  b1.css({ background: '#0070b7', color: '#fff' });
  b2.css({ background: '', color: '' });
  b3.css({ background: '', color: '' });
  b4.css({ background: '', color: '' });
  led1.show('slow, linear');
  led2.hide('slow, linear');
});

b2.click(function(){
  b1.css({ background: '#efefef', color: '#707173' });
  b2.css({ background: '#0070b7', color: '#fff' });
  b3.css({ background: '', color: '' });
  b4.css({ background: '', color: '' });
  led1.hide('slow, linear');
  led2.show('slow, linear');
});

你绝对可以把它缩短，但是有一个“收益递减”的地方，你节省的空间是由越来越复杂，难以阅读和/或效率低下的代码支付的。

如何缩短样式？

2 个答案: