Как можно оптимизировать код?

Question

[Иван Иванов]

Прошу прощения, я только учусь. Имеется вот такой код:

$( ".btn-change-sect" ).click(function() {
	  switch (this.id) {
		  case 'btn-block-section-1':
			 document.getElementById("block-section-1").style.display="block";
			 document.getElementById("block-section-2").style.display="none";
			 document.getElementById("block-section-3").style.display="none";
			 document.getElementById("block-section-4").style.display="none";
			 
			 document.getElementById("btn-block-section-2").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-3").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-4").style.borderBottom = "2px solid #fff";
			 this.style.borderBottom = "2px solid #ff7300";
			break;
		  case 'btn-block-section-2':
			 document.getElementById("block-section-2").style.display="block";
			 document.getElementById("block-section-1").style.display="none";
			 document.getElementById("block-section-3").style.display="none";
			 document.getElementById("block-section-4").style.display="none";
			 
			 document.getElementById("btn-block-section-1").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-3").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-4").style.borderBottom = "2px solid #fff";
			 this.style.borderBottom = "2px solid #ff7300";
			break;
		  case 'btn-block-section-3':
			 document.getElementById("block-section-3").style.display="block";
			 document.getElementById("block-section-2").style.display="none";
			 document.getElementById("block-section-1").style.display="none";
			 document.getElementById("block-section-4").style.display="none";
			 
			 document.getElementById("btn-block-section-2").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-1").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-4").style.borderBottom = "2px solid #fff";
			 this.style.borderBottom = "2px solid #ff7300";
			break;
		  case 'btn-block-section-4':
			 document.getElementById("block-section-4").style.display="block";
			 document.getElementById("block-section-2").style.display="none";
			 document.getElementById("block-section-3").style.display="none";
			 document.getElementById("block-section-1").style.display="none";
			 
			 document.getElementById("btn-block-section-2").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-3").style.borderBottom = "2px solid #fff";
			 document.getElementById("btn-block-section-1").style.borderBottom = "2px solid #fff";
			 this.style.borderBottom = "2px solid #ff7300";
			break;
		}
	});

Чует сердце, что это можно как-то оптимизировать, но как не хватает уровня знаний... Так же буду признателен если скинете какие-нибудь статьи или литературу, где рассматриваются такие банальные примеры по оптимизации.

Comments

[Антон]

Вывалите сие на кодпэн или жсфидл в рабочем состоянии

Answer 1

[Иван Корюков]

Во-первых, отличия в стиле надо выносить в классы.

.btn-change-sect {
    display: none;
    border-bottom: 2px solid #ffffff;
}

.active {
   display: block;
   border-bottom: 2px solid #ff7300;
}

Во-вторых, не стоит привязываться к конкретике, в вашем случае, при клике есть только текущий элемент и все остальные

$( ".btn-change-sect" ).click(function() {
    // убираем активный стиль со всех подобных элементов
    $( ".btn-change-sect" ).removeClass("active");
    // ставим активный стиль текущему элементу
    $(this).addClass("active");
});

Comments

[Иван Иванов]

Спасибо огромное, буду изучать addClass и removeClass. Видел такое в чужих скриптах, но сам не пользовался ни разу. Спасибо!

[Иван Иванов]

Всё получилось, с кнопками работает отлично, а вот с секциями не пойму как быть. Получилось вот так:

$( ".btn-change-sect" ).click(function() {
    // убираем активный стиль со всех подобных элементов
    $( ".btn-change-sect" ).removeClass("active");
    $( ".section-element-description" ).removeClass("activeted");
    // ставим активный стиль текущему элементу
    $(this).addClass("active");
	

	switch (this.id) {
	  case 'btn-block-section-1':
		$("#block-section-1").addClass("activeted");
		break;
	  case 'btn-block-section-2':
		$("#block-section-2").addClass("activeted");
		break;
	  case 'btn-block-section-3':
		$("#block-section-3").addClass("activeted");
		break;
	  case 'btn-block-section-4':
		$("#block-section-4").addClass("activeted");
		break;
	}
});

[Иван Корюков]

Иван Иванов, Добвьте в тэги связующую информацию, вот так:

<button class="btn-change-sect" data-tab-id="1">Кнопка</button>
<button class="btn-change-sect" data-tab-id="2">Кнопка</button>
<!-- Где-то есть табы-->
<div class="section-element-description" data-tab-id="1">...</div>
<div class="section-element-description" data-tab-id="2">...</div>

И теперь пишем js:

$( ".btn-change-sect" ).click(function() {
    $( ".btn-change-sect" ).removeClass("active");
    $( ".section-element-description" ).removeClass("activeted");
    $(this).addClass("active");
    // получаем значение data-атрибута кнопки
    var tab_id = $(this).data("tab-id");
    // селектором с указанием атрибута берём нужный таб и ему добавляем класс
    $( ".section-element-description[data-tab-id=\""+tab_id +"\"]" ).addClass("activeted");
});

[Иван Иванов]

Иван Корюков, Спасибо большое ))) всего два ваших сообщения а я узнал столько нового =) Я просто чувствовал, что элементы можно связывать, теперь буду знать =))) Большое спасибо!

[Иван Корюков]

Иван Иванов, Не за что) Советую глянуть на список всех функций, которые есть у jQuery.

[Adamos]

Связующая информация здесь, по большому счету, не требуется.
Достаточно выводить id управляемого элемента из id управляющего (тупо убирать первые четыре символа, в данном случае).

[Иван Иванов]

Adamos, я правильно понимаю, вы предлагаете убрать "btn-"? Но разве id элемента не должен быть уникальным?

[Иван Корюков]

Adamos, да, можно у таба не указывать data-атрибут, а указать id. И получение элемента по id будет быстрее чем по класс+атрибут. Но выводить id таба из id кнопки это плохо. Не стоит совмещать разную информацию в одном поле. Поэтому оптимальным решением будет иметь в кнопке data-атрибут, который содержит id таба.

[Adamos]

Иван Иванов, $("#" + this.id.substr(4)).addClass("activeted");

Иван Корюков, это может быть справедливо для проекта, который уже невозможно удержать в голове. Для учебного - явный оверхед.
Ну, а для серьезного уже придется задуматься, не критичной ли окажется разница в скорости этих двух подходов ;)

[Иван Иванов]

Adamos, теперь понял ) Тоже отличное решение ) Не знаю только, уместно ли его использовать в рабочем проекте сайта, не заклюёт ли меня потом тот, кто будет работать после меня с проектом?

[Adamos]

Иван Иванов, в рабочем проекте сайта уместнее использовать готовые библиотеки, а не самопальные велосипеды. В любом случае. Они и избавят от глупых ошибок, и обеспечат единый стандарт логики. А он гораздо важнее абстрактной "правильности" для того, кому требуется поддерживать код.

[Иван Корюков]

Adamos, в случае связки кнопка + таб, кнопке id не нужен вообще. Обработчик вешается на класс, id таба берётся из data-атрибута. Так что вы меняете шило на мыло)
И вводите лишнее ограничение - таб должен иметь id такой же как id кнопки без первых 4-х символов. Зачем это? data-атрибуты гибче. Учебный проект - чтобы учиться. Надо учиться делать правильно.
На учебном примере можно не столкнуться с проблемой, которая возникнет на большом проекте.

[Иван Корюков]

Adamos, Был тут недавно вопрос про слайдер, где слайд разделён на две колонки, и при клике надо сдвигать слайд на одну колонку. Вот для таких случаев может не найтись библиотеки. придётся писать самому.

[Adamos]

Иван Корюков, гибкость и скорость - две чаши весов, уверен, вы сами это знаете.
Если библиотеки для конкретной задачи нет - имеет смысл писать свою в том же стиле, как другие используемые на сайте. По все той же выше озвученной причине. И да, если там приняты data-атрибуты - делать так же, если это не противоречит требованиям производительности.

[Иван Корюков]

Adamos, вот за что не люблю программистов - эти ботаны (такие же как я) привыкли думать что они знают лучше, а ещё они упёртые - у кого ещё хватит терпения часами выткать в компьютер, чтобы он в обратку написал пару строк)
Так вот, эти люди постоянно хотят оставить последнее слово за собой.

Оба варианта рабочие и имеют право на жизнь. Оба, наверное, могут создать те или иные проблемы.
Теперь человек знает об обоих вариантах - мы сделали мир чуть лучше.

[Иван Иванов]

Иван Корюков, Да согласен ) вы оба мне очень помогли, наверно в будущем, всё таки, буду пользоваться data-tab-id мне этот вариант показался более правильным, позволяющим держать волков отдельно от овец. Но решение Adamos мне понравилось за свою простоту и лаконичность. Спасибо ребят!