-4
Выбор нескольких атрибутов данных с помощью Jquery нажмите() функцию
<script>
\t jQuery(document).ready(function ($){
\t \t function toggleChevron(e) {
\t \t \t $(e.target)
\t \t \t \t .prev('.panel-heading')
\t \t \t \t .find("i")
\t \t \t \t .toggleClass('fa-plus fa-minus');
\t \t
\t \t \t }
\t \t \t
\t \t \t $('#accordion').on('hidden.bs.collapse', toggleChevron);
\t \t \t $('#accordion').on('shown.bs.collapse', toggleChevron); \t \t
\t \t }); \t
</script><div class="col-md-8 hidden-xs"> \t \t \t \t \t \t
\t <div id="carousel">
\t <a href="#"><img src="<?php echo IMAGES. '/home-1.jpg' ?>" id="item-1" /></a>
\t <a href="#"><img src="<?php echo IMAGES. '/home-2.jpg' ?>" id="item-2" /></a>
\t <a href="#"><img src="<?php echo IMAGES. '/home-3.jpg' ?>" id="item-3" /></a> \t \t \t \t \t \t \t \t
\t </div> \t \t
</div>
<div class="col-md-4 rooms-description"> \t
\t <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
\t <div class="panel panel-default">
\t \t <div class="panel-heading" role="tab" id="headingOne">
\t \t <h4 class="panel-title"> \t \t \t \t
\t \t \t <a role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-1" href="#roomsOne" aria-expanded="true" aria-controls="roomsOne">
\t \t \t <?php printf(esc_html__('Standard Studio', 'la-vida-suite')); ?>
\t \t \t </a>
\t \t \t <i class="fa fa-minus pull-right"></i>
\t \t </h4>
\t \t </div>
\t \t <div id="roomsOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
\t \t <div class="panel-body">
\t \t \t <p><?php printf(esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Located on the eighth floor,', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>
\t \t </div><!-- panel-body-->
\t \t </div>
\t </div><!-- panel-default-->
\t <div class="panel panel-default">
\t \t <div class="panel-heading" role="tab" id="headingTwo">
\t \t <h4 class="panel-title">
\t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-2" href="#roomsTwo" aria-expanded="false" aria-controls="roomsTwo">
\t \t \t <?php printf(esc_html__('Executive Studio', 'la-vida-suite')); ?>
\t \t \t </a>
\t \t \t <i class="fa fa-plus pull-right"></i>
\t \t </h4>
\t \t </div>
\t \t <div id="roomsTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
\t \t <div class="panel-body">
\t \t \t <p><?php printf(esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Located on the ninth floor,', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>
\t \t </div><!-- panel-body-->
\t \t </div>
\t </div><!-- panel-default-->
\t <div class="panel panel-default">
\t \t <div class="panel-heading" role="tab" id="headingThree">
\t \t <h4 class="panel-title">
\t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-3" href="#roomsThree" aria-expanded="false" aria-controls="roomsThree">
\t \t \t <?php printf(esc_html__('Deluxe 1 Bedroom', 'la-vida-suite')); ?>
\t \t \t </a>
\t \t \t <i class="fa fa-plus pull-right"></i>
\t \t </h4>
\t \t </div>
\t \t <div id="roomsThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
\t \t <div class="panel-body">
\t \t \t <p><?php printf(esc_html__('For More Than One couple or a family', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('Located on the lower floors', 'la-vida-suite')); ?></p>
\t \t \t <p><?php printf(esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p> \t \t \t \t \t \t \t
\t \t \t <p><?php printf(esc_html__('Apartment size is 55 m²', 'la-vida-suite')); ?></p>
\t \t </div>
\t \t </div><!-- panel-body-->
\t </div><!-- panel-default--> \t
\t </div><!-- panel-group-->
</div><!--col-md-4-->я взял две колонки: COL-MD-8 и COL-MD-4. В col-md-4 имеется аккордеон, имеющий элементы данных-item-1, item-2 и item-3. В col-md-8 есть 3 изображения в карусели. Я хочу получить такой результат. Если одна панель аккордеона активна, она должна отображать соответствующее изображение в карусели. Например, если элемент данных = 2 активен, тогда должна появиться карусель с изображением id = "item-2". Я также включил сценарий, в котором я дал опцию переключения (+, -) в аккордеоне. Как написать код в скрипте, чтобы получить желаемый результат? Мне нужна помощь.
Ни один из ваших элементов не имеют 'id' атрибут...? Кроме того, вложенные элементы 'a' являются недопустимыми HTML. Они будут переданы братьям и сестрам. –
Я отредактировал вопрос. Plz проверить сейчас. Я хочу поместить несколько элементов данных в jquery, чтобы они выполняли какие-либо действия при нажатии. –