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

为可点击的div ex创建smome基类。＆＃39;切换＆＃39;，然后改变如下：

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

var div=$(this);

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

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

});

Answer 3

不是我建议这样缩短它，但你可以将多个选择器组合到委托处理程序中并测试它在回调函数中的哪个元素类型：

diff

或更短的内容仍会删除$('body').on('click', '.toggle1,.toggle2', function() { $('body').find($(this).hasClass('.toggle1') ? '.buttonshow' : '.htmlshow').slideToggle(400); });并使用find语法：

$(selector)

注意：将'body'用于委派事件有一个错误，所以我总是使用$('body').on('click', '.toggle1,.toggle2', function() { $($(this).hasClass('.toggle1') ? '.buttonshow' : '.htmlshow').slideToggle(400); });。这也有在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);
          }
   });

将两个jQuery函数合并为一个

4 个答案: