Как оптимизировать указанный jQuery код?

199

17 мая 2018, 15:30

Как оптимизировать данный код, или лучше уже нельзя?

$('.option_dev .checkbox_dev').hide();
$('.option_dev').append('<div class="btn">Показать добавки');
$('.option_dev .btn').click(function() {
    $('.checkbox_dev').slideToggle();
});

Answer 1

Если не брать во внимание $('.checkbox_dev').slideToggle(), то:

$('.option_dev').on("click", ".btn",function() { 
    $('.checkbox_dev').slideToggle(); 
}) 
.append('<div class="btn">Показать добавки') //сразу же добавляем btn 
.find('.checkbox_dev').hide(); // https://jsperf.com/jquery-child-selector-vs-find/9

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="option_dev"> 
  <div class="checkbox_dev">checkbox</div> 
</div>

Answer 2

Ещё один вариант

$('.checkbox_dev', $('.option_dev').append( 
	$('<div></div>', 
		{ 
			class: "btn", 
			text: 'Показать добавки' 
		} 
	).click(function(e){ 
		$('.checkbox_dev').hide(); 
		$(this).siblings('.checkbox_dev').slideToggle(); 
	}) 
)).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="option_dev"> 
	<div class="checkbox_dev"> 
		<ol> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
		</ol> 
	</div> 
</div> 
<div class="option_dev"> 
	<div class="checkbox_dev"> 
		<ol> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
		</ol> 
	</div> 
</div> 
<div class="option_dev"> 
	<div class="checkbox_dev"> 
		<ol> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
		</ol> 
	</div> 
</div> 
<div class="option_dev"> 
	<div class="checkbox_dev"> 
		<ol> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
			<li>Добавка</li> 
		</ol> 
	</div> 
</div>

Логику клика можно улучшить

Answer 3

Улучшить можно

Каждый раз вызывая что-то вроде $('.option_dev') ты заставляешь jQuery шерстить всю страницу в поиске всех .option_dev и делать из найденных jQuery-объект, потом вызвав например $('.option_dev .checkbox_dev') - опять весь документ будет просмотрен в поиске.

И так по начальному коду - 4 раза.

Лучше сделать так:

var $optionDev = $('.option_dev'); // Один раз поискали - и запомнили
$optionDev.find('.checkbox_dev').hide(); // Поискали уже в небольшом диве, а не документе
$optionDev.append('<div class="btn">Показать добавки'); // Используем сохраненное, зачем снова искать все .option_dev?
$optionDev.click(function(e) { // Опять используем сохраненное, и ловим на нем событие клика по возможно еще не существующему .btn
  if ( $(e.target).hasClass('btn') ) {
    $('.checkbox_dev').slideToggle(); 
  }
});