Как записать код короче?

Question

[Pavel Gonzales]

Добрый день.
Есть ссылки на попап окна и сами попап окна, их на сайте несколько.
У меня есть код, очень избыточный, хочу его сократить.
Подскажите как это сделать, пожалуйста

$('.open_popup_Mac').click(function(){
				$('.popup_Mac').fadeIn(0);
				$('.popup_Mac').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_iPhone').click(function(){
				$('.popup_iPhone').fadeIn(0);
				$('.popup_iPhone').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_iPhone_price').click(function(){
				$('.popup_iPhone_price').fadeIn(0);
				$('.popup_iPhone_price').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_iPad').click(function(){
				$('.popup_iPad').fadeIn(0);
				$('.popup_iPad').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_iPad_price').click(function(){
				$('.popup_iPad_price').fadeIn(0);
				$('.popup_iPad_price').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_delivery_more').click(function(){
				$('.popup_delivery_more').fadeIn(0);
				$('.popup_delivery_more').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_enter_form').click(function(){
				$('.popup_enter_form').fadeIn(0);
				$('.popup_enter_form').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});
			$('.open_popup_delivery').click(function(){
				$('.popup_delivery').fadeIn(0);
				$('.popup_delivery').animate({top:"0", bottom:"0"}, 400);
				$('header').animate({top:"-60px"}, 400);
			});

Answer 1

[Stalker_RED]

Вы же наверное заметили, что у вас очень много повторяющихся фрагментов. Вынесите их в отдельную функцию.

function myFunc(selector){
  	$(selector)
		.fadeIn(0)
		.animate({top:"0", bottom:"0"}, 400);
	$('header').animate({top:"-60px"}, 400);
}
$('.open_popup_Mac').click(function(){
	myfunc('.popup_Mac');
});
$('.open_popup_iPhone').click(function(){
	myFunc('.popup_iPhone');
});
$('.open_popup_iPhone_price').click(function(){
	myFunc('.popup_iPhone_price');
});
$('.open_popup_iPad').click(function(){
	myFunc('.popup_iPad');
});
$('.open_popup_iPad_price').click(function(){
	myFunc('.popup_iPad_price');
});
$('.open_popup_delivery_more').click(function(){
	myFunc('.popup_delivery_more');
});
$('.open_popup_enter_form').click(function(){
	myFunc('.popup_enter_form');
});
$('.open_popup_delivery').click(function(){
	myFunc('.popup_delivery');
});

Comments

[Сергей Протько]

теперь нашему взору открывается еще больше дублирования) можно и его устранить)

Answer 2

[holfza]

Ссылки:

<a href="" class="popup_open" data-target=".popup_1"></a>
<a href="" class="popup_open" data-target=".popup_2"></a>
<a href="" class="popup_open" data-target=".popup_3"></a>
<a href="" class="popup_open" data-target=".popup_4"></a>
<a href="" class="popup_open" data-target=".popup_5"></a>

Окна:

<div class="popup_1"></div>
<div class="popup_2"></div>
<div class="popup_3"></div>
<div class="popup_4"></div>
<div class="popup_5"></div>

Jquery:

$('.popup_open').click(function () {
	var modal = $(this).data('target');
	$(modal).fadeIn(0);
	$(modal).animate({top:"0", bottom:"0"}, 400);
	$('header').animate({top:"-60px"}, 400);
	return false;
});

Answer 3

[Алексей]

Наверное я бог костылей, но вродь коротко ))

$('.open_popup_Mac, .open_popup_iPhone, .open_popup_iPhone_price, .open_popup_iPad, .open_popup_iPad_price, .open_popup_delivery_more, .open_popup_enter_form, .open_popup_delivery').click(function(){
	var action = $(this).attr('.class').replace('open_', '');
	$('.' + action).fadeIn(0);
	$('.' + action).animate({top:"0", bottom:"0"}, 400);
    $('header').animate({top:"-60px"}, 400);
});

Comments

[Алексей]

Не знаю, конечно, где у вас расположены скажем .open_popup_Mac и .popup_Mac
но если второй внутри первого, то как-то так было бы лучше:
$('.open').click(function(){
$(this).find('div .device').fadeIn(0);
$(this).find('div .device').animate({top:"0", bottom:"0"}, 400);
$('header').animate({top:"-60px"}, 400);
});

Answer 4

[Super User]

function callback() {
        $('.popup_Mac').fadeIn(0);
        $('.popup_Mac').animate({top:"0", bottom:"0"}, 400);
        $('header').animate({top:"-60px"}, 400);
}

$('.open_popup_Mac').on('click' callback);
$('.open_popup_iPhone').on('click', callback);
// и так далее