我是一个Javascript新手,我正在尝试为这个脚本添加多个ID,为我的bootstrap手风琴添加正/负符号:
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');
});
});
现在这段代码仅适用于一支手风琴,而不是我在页面上的四支手风琴:#acordord,#accordion2,#accordion3,#accordion4。
任何帮助表示赞赏!
答案 0 :(得分:0)
这可能有效:
$('[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');
});
});
我尝试定位所有包含&#34; accordion&#34;在他们的ID中,然后修改您的代码以定位所点击的&#34; accordeon&#34;通过它的ID。
答案 1 :(得分:0)
您可以使用循环来遍历每个id,并将数字添加到每个选择器的末尾,JS将按如下方式运行:
jQuery(function ($) {
for (var i =1; i<=4; i++) {
// Example code
$('#accordion'+i+'').css('background','#ff0000');
}
});
看到这个小提琴: https://jsfiddle.net/6fk8qk6d/
答案 2 :(得分:0)
我工作的一位工程师做了以下工作,这似乎运作良好:
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');
} );
});
});
感谢所有试图提供帮助的人!