Добавление нескольких идентификаторов в JavaScript

Question

Я новичок Javascript, и я пытаюсь добавить несколько идентификаторов для этого сценария, который добавляет плюс/минус символы моих бутстраповских аккордеонов:

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, # аккордеон2, # аккордеон3, # аккордеон4.

Любая помощь приветствуется!

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.

Answer 2

Вы можете использовать цикл для перебора каждого из идентификаторов и добавить номер в конце каждого селектора, то 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'); 
    }); 
}); 
}); 

Спасибо всем, кто пытался помочь!