Question

无论如何我可以简化这个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" );
})

Answer 1

多个选择器链接是单词：:)

如何做到这一点：演示 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" );
})

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

Answer 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" );
});

将相同的功能应用于多个ID

3 个答案: