Question

＆＃13;

<script>
	jQuery(document).ready(function ($){
		function toggleChevron(e) {
			$(e.target)
				.prev('.panel-heading')
				.find("i")
				.toggleClass('fa-plus fa-minus');      
		 
			}
			
			$('#accordion').on('hidden.bs.collapse', toggleChevron);
			$('#accordion').on('shown.bs.collapse', toggleChevron);    		

		});    	
</script>

＆＃13;

<div class="col-md-8 hidden-xs">						
	<div id="carousel">
	  <a href="#"><img src="<?php echo IMAGES. '/home-1.jpg' ?>" id="item-1" /></a>
	  <a href="#"><img src="<?php echo IMAGES. '/home-2.jpg' ?>" id="item-2" /></a>
	  <a href="#"><img src="<?php echo IMAGES. '/home-3.jpg' ?>" id="item-3" /></a>	  		      	      				      
	</div>		    
</div>

<div class="col-md-4 rooms-description">	
	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	  <div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
		  <h4 class="panel-title">				      
			<a role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-1" href="#roomsOne" aria-expanded="true" aria-controls="roomsOne">
			  <?php printf( esc_html__('Standard Studio', 'la-vida-suite')); ?>
			</a>
			<i class="fa fa-minus pull-right"></i>
		  </h4>
		</div>
		<div id="roomsOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
		  <div class="panel-body">
			<p><?php printf( esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Located on the eighth floor,', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>
		  </div><!-- panel-body-->
		</div>
	  </div><!-- panel-default-->
	  <div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingTwo">
		  <h4 class="panel-title">
			<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-2" href="#roomsTwo" aria-expanded="false" aria-controls="roomsTwo">
			  <?php printf( esc_html__('Executive Studio', 'la-vida-suite')); ?>
			</a>
			<i class="fa fa-plus pull-right"></i>
		  </h4>
		</div>
		<div id="roomsTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
		  <div class="panel-body">
			<p><?php printf( esc_html__('Extremely Spacious and comfortable for couples', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Located on the ninth floor,', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Some rooms are connected (by request)', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Room Size is 30 m²', 'la-vida-suite')); ?></p>  
		  </div><!-- panel-body-->
		</div>
	  </div><!-- panel-default-->
	  <div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingThree">
		  <h4 class="panel-title">
			<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-item="item-3" href="#roomsThree" aria-expanded="false" aria-controls="roomsThree">
			  <?php printf( esc_html__('Deluxe 1 Bedroom', 'la-vida-suite')); ?>
			</a>
			<i class="fa fa-plus pull-right"></i>
		  </h4>
		</div>
		<div id="roomsThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
		  <div class="panel-body">
			<p><?php printf( esc_html__('For More Than One couple or a family', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('Located on the lower floors', 'la-vida-suite')); ?></p>
			<p><?php printf( esc_html__('King or Twin Bed', 'la-vida-suite')); ?></p>							        
			<p><?php printf( esc_html__('Apartment size is 55 m²', 'la-vida-suite')); ?></p>
		  </div>
		</div><!-- panel-body-->
	  </div><!-- panel-default-->	 
	</div><!-- panel-group-->
</div><!--col-md-4-->

＆＃13;

我有两列：col-md-8和col-md-4。在col-md-4中，有一个手风琴，其中包含数据项item-1，item-2和item-3。在col-md-8中，旋转木马中有3个图像。我想要这样的结果。如果一个手风琴面板处于活动状态，它应该在旋转木马中显示相应的图像。例如，如果data-item = 2是活动的，则轮播具有图像id =＆＃34; item-2＆＃34;应该出现。我还包括一个脚本，我在手风琴中给出了（+， - ）的切换选项。我应该如何在脚本中编写代码以便获得所需的结果？我需要帮助。

Answer 1

将所有常用元素附加到一个公共类。例如

class="collapsed myCommonElement"

然后你可以使用

$(.myCommonElement")

类选择器，将click分配给该类的所有元素。

另请注意，如果可以，则应采用$(.myCommonElement").on("click", function(){..}模式，因为它优于

$("").click()

方法有很多原因..

使用jquery click（）函数选择多个数据属性

1 个答案: