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

$('#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>
  • Вопрос задан
  • 125 просмотров
Пригласить эксперта
Ответы на вопрос 3
vladchv
@vladchv
WordPress Developer
Ну, как минимум можно перечислить селекторы через запятую, и указать все удаляемые классы
$('#one__second, #two__second, #thre__second, #fore__second').removeClass('dnone dflex');

ну и т.д.
Непонятно зачем вы toggle их после удаления, или зачем удалять перед toggle)
А вообще жесть какая-то... а можно стили еще? Аж интересно, что оно делает))
Ответ написан
dimonchik2013
@dimonchik2013
non progredi est regredi
уехать из Индии
Ответ написан
Комментировать
@ptenchik0
не тестил но логика работы как то так:
добавить 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');
});
Ответ написан
Ваш ответ на вопрос

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

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