如何将 jQuery 用于预定义事件？

Question

在 jQuery 插件中实现预定义事件是否有任何标准规则？

例如，Zebra Accordion 插件（jQuery 的小型手风琴插件）或任何其他插件的特殊情况定义了如下事件：

斑马手风琴活动：

onClose: Event fired after a tab is collapsed.

onOpen: Event fired after a tab is collapsed.

在这种情况下，如果我想添加一个带有特殊 Font Awesome characters (such as fa-chevron-down) after the box title when collapsed (Closed, collapsed state) and remove that character and replace it with a new character (like fa-chevron-up) near the box title when expended(opened state). I would like to finally add some functionality like jQuery Accordion 的 div。我已尝试使用以下代码，但似乎有问题：

$('.Zebra_Accordion').on('onOpen', function(e) {
      $(this).append( "<span class='fa fa-chevron-down'></span>" );
  });
  
$('.Zebra_Accordion').off('onClose', function(e) {
      $(this).append( "<span class='fa fa-chevron-up'></span>" );
  });

Answer 1

您可能需要：注意动态创建的 html。例如

<script>
...
$('#add').click(function() {
  $('#container').append('<div class="item"> new item </div>')
})
$('#container .item').on('click', function() { ... })
...
</script>  
<input id="add" value="Add 1 item" type="button"/>  
<div id="container">
  <div class="item"> click item 1 </div>
  <div class="item"> click item 2 </div>
</div>

问题是动态添加的项目不会响应点击事件，因为html还不存在。

你做的，是这样的：

$('#container').on('click', '.item', function() { ... })

然后，jQuery 将监听对#container 的点击，然后在点击时动态搜索 .item 子项。

Answer 2

大多数 jQuery 插件都有一个您传入的 options 对象。在这里您可以定义要设置的属性，包括事件处理程序。

zebra 手风琴事件的 documentation 表示插件提供的每个事件：

The callback function takes 3 arguments:

the tab's position in the accordion (0 based)

the associated title element, as a jQuery object

the tab, as a jQuery object

我刚刚给了他们3个合适的名字，并使用了第二个参数（我随意命名hdr）。

如文档中所述，返回的 hdr 参数是一个包装 <dt> 元素的 jQuery 对象（至少在我的示例中是这样）。在这个对象上，我调用 jQuery 函数 .find() 来查找 <dt> 中具有 fa-chevron-* class 的元素，然后切换 class通过进一步链接 jQuery 函数来实现 span。

如评论中所述，您可以像这样完美地在线完成它：

var accordian = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    collapsible: true,
    onBeforeOpen: function(index, hdr, body) {
       hdr.find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
    },
    onBeforeClose: function(index, hdr, body) {
       hdr.find(".fa-chevron-up").removeClass('fa-chevron-down').addClass('fa-chevron-down');
    }
});

在这种特殊情况下，我会这样做，但我想说明当处理程序有更多代码时该怎么做，在这种情况下，将它们分开的函数可以提高可读性。

不要忘记经常使用 console.log() - 它是 JavaScript 开发人员最好的朋友。

为了检查 Zebra Accordion 为我提供了什么，我首先执行了以下操作：

onBeforeOpen: function(index, hdr, body) {
       console.log("onBeforeOpen", index, hdr, body);
},

此输出显示在浏览器的开发人员控制台中。

这是我将所有内容放在一起的演示：

$(function() {
  
  // add default chevrons here so they only get appended once
  $(".Zebra_Accordion dt").append("<span class='chevron fa fa-chevron-down'></span>");

  // set up the according options
  var accordian = new $.Zebra_Accordion($('.Zebra_Accordion'), {
    collapsible: true,
    onBeforeOpen: showCollapseChevron,
    onBeforeClose: showExpandChevron
  });
  
  function showExpandChevron(index, hdr, body) {
      hdr.find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
  }
  
  function showCollapseChevron(index, hdr, body) {
      hdr.find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
  }
  
});

dl.Zebra_Accordion { width: 100% }
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px }
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0 } 
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000 }

.chevron {
  margin-left: 5px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/stefangabos/Zebra_Accordion/dist/zebra_accordion.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<dl class="Zebra_Accordion">
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
  <dt>Lorem ipsum dolor sit amet consectetuer</dt>
  <dd>
    Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
  </dd>
</dl>

外部演示 https://jsfiddle.net/8wzvucgb/

Answer 3

"Plugin Events" 并不是真正的 events，并且不能与 on() 一起使用。

您可以在手风琴打开和关闭时调用的调用中提供回调。

他们的 "events" 在插件的初始调用中编码：

var myAccordion = new $.Zebra_Accordion($('.Zebra_Accordion'),{
      onOpen:function(index,$title,$block){…},
      onClose:function(index,$title,$block){…}
});

这是一种老式的做事方式。插件使用真实事件更加灵活。

如何将 jQuery 用于预定义事件？

How can I use jQuery for predefined events?

javascript

jquery

dom

jquery-plugins

jquery-events