使用 jquery click() 函数选择多个数据属性

Question

<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> 

<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-->

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

Answer 1

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

class="collapsed myCommonElement"

然后你可以使用

$(.myCommonElement")

类选择器将点击分配给该类的所有元素。

还请注意，如果可以，您应该采用$(.myCommonElement").on("click", function(){..} 模式，因为它比

$("").click()

出于多种原因的方法..