在JavaScript中添加多个ID

Question

我是一名Javascript新手，并且正在尝试向此脚本添加多个ID，以向我的自举手风琴中添加正负符号：

jQuery(function ($) {
  var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
  $active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
  $('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
  $('#accordion').on('show.bs.collapse', function (e)
  {
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
  });
  $('#accordion').on('hide.bs.collapse', function (e)
  {
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  });
});

现在，此代码仅适用于一种手风琴，而不适用于我在页面上显示的全部四种：＃accordion，＃accordion2，＃accordion3，＃accordion4。

任何帮助表示赞赏！

Answer 1

这可能起作用：

    $('[id*="accordion"]').click(function(){
      let active = $('#'+$(this).attr("id")+' .panel-collapse.in').prev().addClass('active');
      $active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
      $('#'+$(this).attr("id")+' .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
      $(this).on('show.bs.collapse', function (e)
      {
        $('#'+$(this).attr("id")+' .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
      });
      $(this).on('hide.bs.collapse', function (e)
      {
        $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
      });
    });

我尝试将ID包含所有“ accordion”的元素作为目标，然后修改您的代码，以按其ID定位单击的“ accordeon”。

Answer 2

您可以使用循环遍历每个id，并将数字添加到每个选择器的末尾，JS的操作如下：

jQuery(function ($) {
for (var i =1; i<=4; i++) {
  // Example code
  $('#accordion'+i+'').css('background','#ff0000');
}
});

看到这个小提琴： https : //jsfiddle.net/6fk8qk6d/

Answer 3

与我合作的一位工程师完成了以下工作，看起来似乎不错：

jQuery(function () {
jQuery( ".accordion" ).each(function( index ) {
var i = index+1;
var jQueryactive = jQuery('#accordion'+i+' .panel-collapse.in').prev().addClass('active');
jQueryactive.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
  jQuery('#accordion'+i+' .panel-heading').not(jQueryactive).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
  jQuery('#accordion'+i).on('show.bs.collapse', function (e) {
jQuery('#accordion'+i+' .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
jQuery(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
  } );
  jQuery('#accordion'+i).on('hide.bs.collapse', function (e) {
jQuery(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  } );
});
});

感谢所有尝试提供帮助的人！