Объеденить 3 функции в одну

281

29 апреля 2017, 23:20

$('.first_upload').click(function(){
    $('.upload_first').slideToggle().css('display', 'block');
  });
  $('.second_upload').click(function(){
      $('.upload_second').slideToggle().css('display', 'block');
  });
   $('.third_upload').click(function(){
      $('.upload_third').slideToggle().css('display', 'block');
  });

Как объеденить эти 3 функции, в одну, но чтобы работали все 3.

Answer 1

Все теги с классами first_upload/second_upload/third_upload называем общим классом, например upload. Аналогично делаем с upload_first/upload_second/upload_third (хотя с ними это делать дае не обязательно).

Далее применяем клик классу upload и говорим: вот относительно конкретно тебя нужно на такой-то элемент применять вот эту функцию.

Пример:

$(document).on('click', '.upload', function(){ 
  $(this).next('.upload-relative').slideToggle(); 
});

.upload { 
  border: 1px solid black; 
  width: 100px; 
  height: 40px; 
  margin: 5px; 
} 
 
.upload-relative { 
  border: 1px solid red; 
  width: 50px; 
  height: 20px;   
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="upload"></div> 
<div class="upload-relative"></div> 
 
<div class="upload"></div> 
<div class="upload-relative"></div> 
 
<div class="upload"></div> 
<div class="upload-relative"></div>

Вместо .next('.upload-relative') может быть что-то другое, в зависимости от вашей разметки, которую я не знаю.