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

Question

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

例如,Zebra Accordion插件(jQuery的一个小型手风琴插件)或任何其他插件的特殊情况定义了一些事件,如下所示:

Zebra手风琴活动:

onClose:折叠选项卡后触发的事件.

onOpen:折叠选项卡后触发的事件.

在这种情况下,如果我想在框标题之后添加一个具有特殊Font Awesome字符的div (例如fa-chevron-down)collapsed(Closed,折叠状态)并删除该字符并将其替换为新字符(如fa- (chevron-up)靠近方框标题时expended(打开状态).我想最后添加一些像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插件都有一个传入的选项对象.在这里,您可以定义要设置的属性,包括事件处理程序.

斑马手风琴活动的文档说明插件提供的每个事件:

回调函数有3个参数:

• 标签在手风琴中的位置(基于0)
• 关联的title元素,作为jQuery对象
• 选项卡,作为jQuery对象

我刚给他们3个合适的名字,并使用了第二个参数(我任意命名hdr).

如文档中所述,hdr返回的参数是包装<dt>元素的jQuery对象(至少在我的示例中).在这个对象上,我调用jQuery函数.find()来查找<dt>具有fa-chevron-*该类的内部元素,然后span通过链接更多jQuery函数来切换它上面的类.

如评论中所述,您可以完美地在线完成,例如:

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手风琴为我提供了什么,我先做了以下几点:

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/