Как сделать изменение стиля короче?

-1

Как я могу уменьшить этот код детали? Мне нужно сделать его короче.Как сделать изменение стиля короче?

Вот моя очень длинная часть кода:

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 "); 
}

источник

2015-05-02 Anonymous

Просто примечание стороны, [Код обзор SE] (HTTP: // Просмотр Кода .stackexchange.com /), вероятно, более подходит для этого вопроса. –

Я голосую за то, чтобы закрыть этот вопрос как не по теме, потому что он принадлежит http://codereview.stackexchange.com/ – EdChum

Я сделал это несколько короче (и более полное и более удобным для чтения) с помощью .css() функции Jquery вместо равнинной синтаксиса 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'); 
});

Вы можете определенно получить его короче, чем это, но есть точка «убывающего», где пространство сохранения оплачивается более сложным, трудно читаемым, и/или неэффективный код.

источник

2015-05-02 23:19:16

Самая большая оптимизация, которую я вижу, - это использовать классы CSS вместо ручной установки стиля для каждого элемента в javascript. Например:

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

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

Тогда ваши нажмите обработчики событий просто сделать:

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

или что-то подобное, что

источник

2015-05-02 23:20:58

Как сделать изменение стиля короче?

ответ

Смежные вопросы