将相同的功能应用于多个 id答案

【问题标题】：Apply same function to multiple ids将相同的功能应用于多个 id
【发布时间】：2014-09-16 11:17:44
【问题描述】：

有没有我可以简化这个JS：

$('#collapse_notebook').on('hide.bs.collapse', function () {
  $('#notebook-caret').removeClass( "fa-caret-up" );
  $('#notebook-caret').addClass( "fa-caret-down" );
})

$('#collapse_note').on('hide.bs.collapse', function () {
  $('#note-caret').removeClass( "fa-caret-up" );
  $('#note-caret').addClass( "fa-caret-down" );
})

【问题讨论】：

您可以使用如下所述的链接。根据您的标记，还可以进一步简化它。例如，如果删除/添加其类的元素是在其上完成操作的选择器的子元素等。

标签： javascript jquery

【解决方案1】：

Multiple selector Chaining 就是这个词：:)

这是如何完成的：demo http://jsfiddle.net/49NBu/ （显示提取位）

提取id 并使用split，因为在您的情况下，_ 之后的任何内容都有一个共同的模式，这是函数内操作所需的。
API：split：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

代码

$('#collapse_note,#collapse_notebook').on('hide.bs.collapse', function () {
  var id = $(this).prop('id').split('_')[1];

  $('#'+id+'-caret').removeClass( "fa-caret-up" );
  $('#'+id+'-caret').addClass( "fa-caret-down" );
})

【讨论】：

这个和原来的不一样...$('#note-caret')需要改

【解决方案2】：

这应该可行。

('#collapse_notebook,#collapse_note').on('hide.bs.collapse', function () {
  var curr_id = this.id.split('_')[1]
  $('#'+curr_id+'-caret').toggleClass('fa-caret-up fa-caret-down');
})

【讨论】：

【解决方案3】：

使用逗号分隔的多个选择器：

$('#collapse_notebook,#collapse_note').on('hide.bs.collapse', function () {
 $("#"+this.id.replace('collapse_','')+"-caret").removeClass( "fa-caret-up" );
 $("#"+this.id.replace('collapse_','')+"-caret").addClass( "fa-caret-down" );
});

【讨论】：