[英]Adding multiple ID's to javascript
我是一名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。
任何幫助表示贊賞!
這可能起作用:
$('[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”。
您可以使用循環遍歷每個id,並將數字添加到每個選擇器的末尾,JS的操作如下:
jQuery(function ($) {
for (var i =1; i<=4; i++) {
// Example code
$('#accordion'+i+'').css('background','#ff0000');
}
});
看到這個小提琴: https : //jsfiddle.net/6fk8qk6d/
與我合作的一位工程師完成了以下工作,看起來似乎不錯:
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');
} );
});
});
感謝所有嘗試提供幫助的人!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.