Необходимо ли оптимизировать самописные табы на JQuery?

Добрый вечер!

Написал небольшой скрипт для вкладок на JQuery. Все совершенно просто: в родительском блоке с классом about существуют три блока (article), каждый из которых становится видимым при нажатии на соответствующую кнопку (menu>li). По умолчанию открыт первый блок. Кстати, за видимость отвечает класс about-current, хотя можно было бы скрывать слои через hide().

JQuery начал изучать недавно и практикуюсь пока на велосипедах. Так вот вопрос: возможно ли оптимизировать, необходимо ли это в данном случае?

Спасибо!

<script>
	$(document).ready(function(){
		// Первый блок открыт по умолчанию
		$(".about article").eq(0).addClass("about-current");
			
		// По клику открываем соответствующий блок, остальные скрываем
		$(".about menu li").eq(0).click(function(){
			$(".about article").eq(0).addClass("about-current");
			$(".about article:not(:eq(0))").removeClass();
			return false;
		});
			
		$(".about menu li").eq(1).click(function(){
			$(".about article").eq(1).addClass("about-current");
			$(".about article:not(:eq(1))").removeClass();
			return false;
		});
			
		$(".about menu li").eq(2).click(function(){
			$(".about article").eq(2).addClass("about-current");
			$(".about article:not(:eq(2))").removeClass();
			return false;
		});
	});
</script>
  • Вопрос задан
  • 2695 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
1. Независимо от сложности приложения, которое вы пишете, нужно помнить, что операции поиска элементов очень дорогостоящие. Нашли один раз свои элементы (в данном случае по классу) и запомнили. А дальше уже с помощью eq(), filter() из них выбираете нужные. И неважно — простая или сложная структура в документе, сложные или не очень действия предусмотрены функционалом. Привычка — второе Я.

2. Искать лучше не по всему документу, а внутри некоего контейнера — так быстрее и правильнее. В данном случае неактуально.

3. Для функциональности лучше использовать data-атрибуты. А классы вы можете менять, как перчатки.

4. При использовании addEventListener писать в обработчике return false не имеет никакого смысла.

5. Вы написали 3 обработчика, хотя в реальности нужен один.

6. Вы сначала находите элементы, а потом навешиваете обработчик на событие click, а правильнее отслеживать событие в документе и обрабатывать его. К тому же, в этом случае не придётся ждать формирования DOM.

7. Ожидание формирования DOM можно делать через $() вместо $(document).ready().

Итого ваш скрипт (для простоты я не сохраняю результат поиска вкладок, поскольку не знаю остальных действий):

$(document).on('click', '.about menu li', function(e){
	$(this).addClass('about-current').siblings('about-current').removeClass('about-current');
});

$(function () {
	$(.about menu li).eq(0).trigger('click');
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@andreyqin
Вот вам хорошая реализация табов:

$('.wrapper-tabs').on('click', 'span:not(.active)', function () {
    $(this)
        .addClass('active')
        .siblings()
        .removeClass('active')
        .closest('.wrapper-tabs')
        .find('.tab-box')
        .eq($(this).index())
        .show()
        .siblings('.tab-box')
        .hide();
});


А это схематичная разметка:

<div class="wrapper-tabs">
    <span class="active">Tab 1</span>
    <span>Tab 1</span>
    <div class="tab-box">Content Tab 1</div>
    <div class="tab-box">Content Tab 2</div>
</div>


Изучайте.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы