Как в Jquery сделать этот код легче и нагружает ли он систему?

Question

[Алексей Хаткевич]

$('#one').on('focus' , function(){
	$('#one__second').removeClass('dnone');
	$('#two__second').removeClass('dnone');
	$('#thre__second').removeClass('dnone');
	$('#fore__second').removeClass('dnone');
	$('#one__second').removeClass('dflex');
	$('#two__second').removeClass('dflex');
	$('#thre__second').removeClass('dflex');
	$('#fore__second').removeClass('dflex');


	$('#one__second').toggleClass('dflex');
	$('#two__second').toggleClass('dnone');
	$('#thre__second').toggleClass('dnone');
	$('#fore__second').toggleClass('dnone');
}) ;


$('#two').on('focus' , function(){
	$('#one__second').removeClass('dnone');
	$('#two__second').removeClass('dnone');
	$('#thre__second').removeClass('dnone');
	$('#fore__second').removeClass('dnone');
	$('#one__second').removeClass('dflex');
	$('#two__second').removeClass('dflex');
	$('#thre__second').removeClass('dflex');
	$('#fore__second').removeClass('dflex');


	$('#one__second').toggleClass('dnone');
	$('#two__second').toggleClass('dflex');
	$('#thre__second').toggleClass('dnone');
	$('#fore__second').toggleClass('dnone');
}) ;


$('#thre').on('focus' , function(){
	$('#one__second').removeClass('dnone');
	$('#two__second').removeClass('dnone');
	$('#thre__second').removeClass('dnone');
	$('#fore__second').removeClass('dnone');
	$('#one__second').removeClass('dflex');
	$('#two__second').removeClass('dflex');
	$('#thre__second').removeClass('dflex');
	$('#fore__second').removeClass('dflex');


	$('#one__second').toggleClass('dnone');
	$('#two__second').toggleClass('dnone');
	$('#thre__second').toggleClass('dflex');
	$('#fore__second').toggleClass('dnone');
}) ;


$('#fore').on('focus' , function(){
$('#one__second').removeClass('dnone');
	$('#two__second').removeClass('dnone');
	$('#thre__second').removeClass('dnone');
	$('#fore__second').removeClass('dnone');
	$('#one__second').removeClass('dflex');
	$('#two__second').removeClass('dflex');
	$('#thre__second').removeClass('dflex');
	$('#fore__second').removeClass('dflex');

	
	$('#one__second').toggleClass('dnone');
	$('#two__second').toggleClass('dnone');
	$('#thre__second').toggleClass('dnone');
	$('#fore__second').toggleClass('dflex');
}) ;

<div class="navig__menu">
					<div class="navig__eat">
						<ul class="navig__menu__eat">
							<li>
								<a id="one" onclick="return false;" class="number__one" href="#">pizza cartoon</a>
							</li>
							<li>
								<a id="two" onclick="return false;" class="number__two" href="#">Burger</a>
							</li>
							<li>
								<a id="thre" onclick="return false;" class="number__thre" href="#">sandwich</a>
							</li>
							<li>
								<a id="fore" onclick="return false;" class="number__fore" href="#">LOREMISPSUM</a>
							</li>
						</ul>
					</div>
				</div>



<div id="one__second" class="block__menu one">
							<div class="block__menu__burger">
								<div class="block__number">
									<div class="number">
										<p>1</p>
									</div>
									<div class="block__img">
										<img src="img/main/number/Layer 1.png" alt="">
									</div>
								</div>
									<div class="block__name">
											<p>create it</p>
									</div>
									<div class="description__menu">
										<p>Choose from a selection of tastilicious toppings to create your own pizza</p>
									</div>
							</div>
							<div class="block__menu__burger">

								<div class="block__number">
									<div class="number">
										<p>2</p>
									</div>
									<div class="block__img">
										<img src="img/main/number/Layer 2.png" alt="">
									</div>
								</div>
									<div class="block__name">
											<p>name it</p>
									</div>
									<div class="description__menu">
										<p>Choose from a selection of tastilicious toppings to create your own pizza</p>
									</div>
							</div>

Answer 1

[Владислав Черненко]

Ну, как минимум можно перечислить селекторы через запятую, и указать все удаляемые классы

$('#one__second, #two__second, #thre__second, #fore__second').removeClass('dnone dflex');

ну и т.д.
Непонятно зачем вы toggle их после удаления, или зачем удалять перед toggle)
А вообще жесть какая-то... а можно стили еще? Аж интересно, что оно делает))

Comments

[Алексей Хаткевич]

Дело в том, что когда нажимал на ссылки, получалось так, что добавленные классы не исчезали и получалась ерунда, решил проблему таким образом :)

[Алексей Хаткевич]

Я только начинаю в этом разбираться :)

[Алексей Хаткевич]

Как я могу скинуть документ ?

[Владислав Черненко]

Алексей Хаткевич, залейте на CodePen или JsFiddle

[Алексей Хаткевич]

Владислав Черненко, Лечу

[Алексей Хаткевич]

Владислав Черненко, в css всё dnone dflex на последних строчках https://jsfiddle.net/ZerroOne/pjek027n/#&togetherj...

[Владислав Черненко]

Алексей Хаткевич, оу дык это же обычные табы, почему вы так все усложнили? Их можно вообще на чистом css сделать... Вот тут посмотрите, вариантов просто тьма TABS

[Алексей Хаткевич]

Владислав Черненко, искал на css,но не нашел, видимо плохо искал. Чтобы решить эту проблему, решил посмотреть JQuery и написать такой код(Немного подправил JQ и файл стал намного меньше весить, с 300КБ в 2КБ). Спасибо вам за ссылку :)Пойду дальше учить:)

[Владислав Черненко]

Алексей Хаткевич,

1. CSS only tabs
2. CSS Only Tabbed Content
Но я не зазываю к чистому css если что) просто как примеры.. сам делаю на JS.

[Алексей Хаткевич]

Владислав Черненко, мне больше понравилась библиотека JQuery и её функционал, чем на CSS.
Как по мне , на JS легче сделать:)

Answer 2

[Dimonchik]

уехать из Индии

Answer 3

[Олег К]

не тестил но логика работы как то так:
добавить href что бы было типа

<a id="one" class="number__one" href="#one">pizza cartoon</a>

$(document).on('click', '.navig__menu a', function(e){
	e.preventDefault();
	var a_href = $(this).attr('href');
	$('.block__menu').removeClass('dnone dflex');
	$(a_href + '__second').toggleClass('dflex');
});

или не меняя ничего

$(document).on('click', '.navig__menu a', function(e){
	e.preventDefault();
	var id = $(this).attr('id');
	$('.block__menu').removeClass('dnone dflex');
	$('.'+id).toggleClass('dflex');
});

вообщем работает https://jsfiddle.net/ce7d682t/1/

только непонятно зачем removeClass('dnone') если должен отображатся только елемент под фокусом

если я правильно понял что требуется то вот https://jsfiddle.net/ce7d682t/3/

$(document).on('focus', '.navig__menu a', function(e){
  e.preventDefault();
  var id = $(this).attr('id');
  $('.block__menu').removeClass('dflex');
  $('.'+id).addClass('dflex');
});

Comments

[Алексей Хаткевич]

У меня была беда в том, что когда нажимаю на ссылку, открывается блок, нажимаю на другую ссылку, старый блок не пропадает и открывается новый, вообщем такая хрень, только такой выход смог найти,

[Олег К]

Алексей Хаткевич, имело место небольшое недопонимание логики. по сути dnone вообще не нужен. в css мы по умолчанию скрываем все .block__menu, а уже по клику, добавляем нужному елементу dflex. если у нас уже что-то открыто, то мы пробегаемся по дереву и убираем dflex, а затем уже нужному добавляем dflex.
https://jsfiddle.net/ce7d682t/3/ обратите внимание на css

[Алексей Хаткевич]

Олег К, просто пытался в css добавить по типу при нажатии на ссылку, будет срабатывать dflex пример:"a:focus .block" { display:flex}. Я так предполагал что будет работать, но что-то не получилось :(