Как сократить код на jQuery

421

07 января 2017, 15:48

Мой код работает. Но думаю, что как-то не так написал. Можно ли такое сократить?

$( "#clickbtn_recovery" ).click(function() { 
  $( ".modal-backdrop.in" ).hide( 500 ); 
}); 
  $( "#clickbtn_recovery" ).click(function() { 
  $( "#exampleModal_auth" ).hide( 500 ); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="clickbtn_recovery">кнопка нажать</div> 
<div class="modal-backdrop.in" id="exampleModal_auth">Тут прячутся два разных элемента</div>

HTML-код модального окна под спойлером ниже.

 <!-- HTML-код модального окна --> 
  <div class="modal fade" id="exampleModal_auth" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
          </button> 
          <h4 class="modal-title" id="exampleModalLabel">Авторизация</h4> 
      </div> 
 <!-- Основное содержимое модального окна --> 
      <div class="modal-body">  
               <form role="form" class="formForMe" id="register_form" method="post"> 
               <div class="input-group"> 
               <span class="input-group-addon"><span class="add-on"><i class="fa fa-at" aria-hidden="true"></i></span></span> 
               <input type="text" class="input form-control" id="email_auth" placeholder="Ваша почта" required autofocus /> 
               </div>    
               <div class="input-group"> 
               <span class="input-group-addon"><span class="add-on"><i class="fa fa-key" aria-hidden="true"></i></span></span> 
               <input type="text" class="input form-control" id="password_auth" placeholder="Ваш будующий пароль" required autofocus /> 
               </div> 
                     <p class="bg-danger_auth" id="bg-danger_auth">...</p>    
                     <p class="success_auth" id="success_auth">...</p>    
                     <p class="error" id="error">...</p>                  
      </div> 
      <!-- Футер модального окна --> 
      <div class="modal-footer"> 
        <button type="button" value="1" class="clickButtonForm btn btn-block btn-info" id="clickButtonForm_auth">Зарегистрироваться</button> 
        <button type="button" value="1" class="clickButtonForm btn btn-block btn-info" id="clickbtn_recovery" data-toggle="modal" data-target="#exampleModal_recovery">Востановить пароль</button> 
        </form>      
        </div> 
      </div> 
    </div> 
  </div>          
 <!-- HTML-код модального окна --> 
  <div class="modal fade" id="exampleModal_recovery" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
          </button> 
          <h4 class="modal-title" id="exampleModalLabel">Востановление</h4> 
      </div> 
 <!-- Основное содержимое модального окна --> 
      <div class="modal-body">  
               <form role="form" action="client-reg/ajax_recovery.php" class="formForMe" id="register_form" method="post"> 
               <div class="input-group"> 
               <span class="input-group-addon"><span class="add-on"><i class="fa fa-at" aria-hidden="true"></i></span></span> 
               <input type="text" class="input form-control" name="email_recovery" id="email_recovery" placeholder="Ваша почта" required autofocus /> 
               </div>    
                     <p class="bg-danger_auth" id="bg-danger_auth">...</p>    
                     <p class="success_auth" id="success_auth">...</p>    
                     <p class="error" id="error">...</p>                  
      </div> 
      <!-- Футер модального окна --> 
      <div class="modal-footer"> 
        <button type="submit" name="submit" value="submit" class="clickButtonForm btn btn-block btn-info" id="clickButtonForm_for_recovery">Востановить</button> 
        </form>      
        </div> 
      </div> 
    </div> 
  </div>

Answer 1

Селекторы можно перечислять через запятую:

$( "#clickbtn_recovery" ).click(function() {
  $( ".modal-backdrop.in, #exampleModal_auth" ).hide( 500 );
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать такой слайдер? [требует правки]

362

javascript

Вывод максимального числа в массиве

Вывожу максимальное число функцией

399

javascript

Как добавить сгенерированный canvas в нужный элемент в html?

Сейчас, если встроить этот скрипт в html, то он создает canvas внизу экрана, а хотелось бы его оптимизировать так, чтобы можно было вставить в любой...

374

javascript

Как получить css свойства с помощью React?

Есть код

438