Объединение двух функций jQuery в один

Question

Как объединить эти две функции jQuery?

Вот код.

$('body').on('click', '.toggle2', function() { 
    $('body').find('.htmlshow').slideToggle(400); 
}); 

$('body').on('click', '.toggle1', function() { 
    $('body').find('.buttonshow').slideToggle(400); 
}); 

Answer 1

Вы можете создать плагин JQuery для выполнения общей функции.

(function($) { 
 
    /** 
 
    * Adds click listener to an element which triggers a slideToggle on a target element. 
 
    * 
 
    * @param {string} lstnrSel Listener element selector. 
 
    * @param {string} trgtSel Target element selector. 
 
    * @param {int} [msDelay=1000] Animation delay in ms. 
 
    * @returns {jQuery} Returns itself for chaining. 
 
    */ 
 
    $.fn.clickToggle = function(options) { 
 
    let $this = this; 
 
    let lstnrSel = options.lstnrSel; 
 
    let trgtSel = options.trgtSel; 
 
    let msDelay = options.msDelay != null ? options.msDelay : 1000; 
 
    $this.on('click', lstnrSel, function() { 
 
     $this.find(trgtSel).slideToggle(msDelay); 
 
    }); 
 
    return $this; 
 
    } 
 
}) (jQuery); 
 

 
$(function() { 
 
    $('body') 
 
    .clickToggle({ lstnrSel: '.toggle1', trgtSel: '.htmlshow', msDelay: 400 }) 
 
    .clickToggle({ lstnrSel: '.toggle2', trgtSel: '.buttonshow', msDelay: 400 }); 
 
});

div[class^="toggle"] { 
 
    display: inline-block; 
 
    width: 7em; 
 
    height: 1.5em; 
 
    line-height: 1.5em; 
 
    border: thin dashed #AAA; 
 
    margin-left: 0.25em; 
 
    padding: 0.125em; 
 
    text-align: center; 
 
    font-weight: bold; 
 
} 
 

 
div[class^="toggle"]:hover { 
 
    border: thin solid #A00; 
 
    color: #A00; 
 
    background: #DD0; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toggle1">Toggle HTML</div> 
 
<div class="toggle2">Toggle Button</div> 
 

 
<div class="htmlshow"><p>Hello World</p></div> 
 
<div class="buttonshow"><input type="button" value="Click Me" /></div>

Answer 2

Создайте базовый класс для интерактивных divs ex. «Тумблер», и чем изменения, как это:

$('.toggle').on('click', function() { 

var div=$(this); 

if(div.hasClass("toggle2")){ 
    $('.htmlshow').slideToggle(400); 

}else if(div.hasClass("toggle1")){ 
    $('.buttonshow').slideToggle(400); 
} 

}); 

Answer 3

Не то, что я бы рекомендовал сделать его короче этот путь, но вы можете комбинировать несколько селекторов в делегированных обработчика и испытания, какой элемент типа это было в функции обратного вызова:

$('body').on('click', '.toggle1,.toggle2', function() { 
    $('body').find($(this).hasClass('.toggle1') ? '.buttonshow' : '.htmlshow').slideToggle(400); 
}); 

или еще короче падение find и использовать $(selector) синтаксис:

$('body').on('click', '.toggle1,.toggle2', function() { 
    $($(this).hasClass('.toggle1') ? '.buttonshow' : '.htmlshow').slideToggle(400); 
}); 

примечание: Там ошибка с помощью 'тело' для делегированных событий, поэтому я всегда буду использовать document. Это также имеет преимущество документа существует до DOM готов так можно зарегистрировать без DOM готовой обертки :)

Answer 4

$('body .toggle1,body .toggle2').on('click',function(){ 
     if($(this).hasClass("toggle2")) 
      { 
      $('body').find('.htmlshow').slideToggle(400); 
      } 
      else 
      { 
      $('body').find('.buttonshow').slideToggle(400); 
      } 
    });