Question

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

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

Zebra手风琴活动：

onClose ：折叠标签后触发事件。

onOpen ：在标签折叠后触发了事件。

在这种情况下，如果我想在collapsed（已关闭，折叠状态）的方框标题后面添加一个带有特殊Font Awesome字符的div（例如fa-chevron-down）并删除该字符并在expended（打开状态）时用方框标题附近的新字符（如fa-chevron-up）替换它。我想最后添加一些像jQuery Accordion这样的功能。我已尝试使用以下代码，但似乎出现了问题：

$('.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

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

斑马手风琴活动的documentation表示插件提供的每个事件：

回调函数有3个参数：


标签在手风琴中的位置（基于0）

关联的title元素，作为jQuery对象

选项卡，作为jQuery对象

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

如文档中所述，返回的hdr参数是一个包装<dt>元素的jQuery对象（至少在我的示例中）。在这个对象上，我调用jQuery函数.find()来查找具有<dt>类的fa-chevron-*内的元素，然后在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'); } });进一步链接jQuery函数。

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

console.log()

在这种特殊情况下，我会，但我想说明当处理程序有更多代码时要做什么，在这种情况下，使它们成为单独的函数可以提高可读性。

不要忘记使用 onBeforeOpen: function(index, hdr, body) { console.log("onBeforeOpen", index, hdr, body); }, - 它是JavaScript开发人员最好的朋友。

要查看Zebra手风琴为我提供的内容，我首先做了以下几点：

$(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');
  }
  
});

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

background-size:cover

＆＃13;

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

Answer 2

“插件事件”实际上不是events，也不适用于on（）。

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

他们的“事件”在插件的初始调用中编码：

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

这是一种老式的做事方式。插件使用真实事件的灵活性要高得多。

Answer 3

您可能需要什么：注意动态创建的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>

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

你做的是这样的：

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

然后，jQuery将听取#container的点击，然后在点击时它会动态搜索.item孩子。

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

3 个答案: