Не добавляется класс active с помощью JS?

Question

[fisherspoons]

Сделал на WP вывод постов в аккордеонах, все работает, но у меня до этого в верстке висел скрипт который должен был навешивать класс active в div с классом panel panel-default, необходимый мне для оформления css, в верстке все работало, но на WP просто не срабатывает и класс не добавляет, в инспекторе ошибок нету и скрипт присутствует Вот собственно цикл аккордеона

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <?php if (have_posts()): while (have_posts()): the_post(); ?>
                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="headingOne">
                                            <h4 class="panel-title">
                                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseTwo">
                                            <?php the_title(); ?>
                                        </a>
                                                <span class="collapsed caret" data-toggle="collapse" data-parent="#accordion" href="#<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseTwo" class="caret"></span>
                                    </h4>
                                        </div>
                                        <div id="<?php the_ID(); ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                            <div class="panel-body">
                                                <?php the_content(); ?>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endwhile; endif; ?>
                        </div>

а это сам скрипт, он подключен но не работает

(function () {

    $(".panel").on("show.bs.collapse hide.bs.collapse", function (e) {
        if (e.type == 'show') {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });

}).call(this);

Comments

[Dmitriy Uvarov]

А подобные события для панели вы генерируете где-то отдельно?

[Иван Федоров]

А ты уверен, что у тебя на WP jQuery вообще работает?

[fisherspoons]

ну скрипт висит footer.php а остальное в шаблоне страницы

[fisherspoons]

да)есть еще много чего на страницах и все работает

Answer 1

[Игорь Воротнёв]

У вас по идее абсолютно все блоки в цикле будут иметь одинаковые классы, в том числе "panel panel-default". На каждой итерации цикла while (have_posts()) вы выводите идентичный код, заменяя в нем только данные (the_title, the_content).

Чтобы избежать этого, можно добавить счетчик:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php if (have_posts()): ?>

	<?php $i = 1; // Устанавливаем счетчик ?>

	<?php while (have_posts()): the_post(); ?>

	<div class="panel <?php echo ( 1 == $i ) ? 'panel-default' : ''; ?>">
	
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseTwo">
					<?php the_title(); ?>
				</a>
				<span class="collapsed caret" data-toggle="collapse" data-parent="#accordion" href="#<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseTwo" class="caret"></span>
			</h4>
		</div>

		<div id="<?php the_ID(); ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
			<div class="panel-body">
				<?php the_content(); ?>
			</div>
		</div>

	</div>

	<?php $i ++; // Увеличивает счетчик ?>

	<?php endwhile; ?>

<?php endif; ?>

</div>

Comments

[fisherspoons]

все равно, не срабатывает

[Игорь Воротнёв]

fisherspoons: JavaScript показывайте

[fisherspoons]

вон он сверху

[Игорь Воротнёв]

fisherspoons: во-первых, $. В WordPress используется noConflict режим.