【问题标题】:jquery - click on different images returns same idjquery - 单击不同的图像返回相同的ID
【发布时间】:2017-05-23 17:30:58
【问题描述】:

我已经为此苦苦挣扎了一段时间。

在我的页面上,我有 17 个图像和 17 个隐藏块。 每个图像都应该显示一个特定的块,就在 css 的正下方。

这是要单击的图像的 HTML 和我一直在尝试的 jquery。

无论我点击哪个图片,它总是保存相同的 ID。

该站点位于 Drupal 上,其中有很多,我想我无法正确访问部分 ID。 最终我想要做的是将 ID 保存在一个变量中,然后浏览我拥有的 id 列表并显示适当的块。 我说得有道理吗?

非常感谢您的帮助,因为我对 jquery 没有信心

jQuery('.impact-sdg-title').click(function() {
    var idPix2 = jQuery('.sdg-pix-first').attr('id');
    var idProject2 = jQuery(this).find('.sdg-class-block').attr('id');    
    jQuery('#'+idProject2).toggle();
    console.log('idProject2:'+idProject2+' - idPix2:'+idPix2);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="block-views-sdg-impact-page-block-2" class="block block-views sdg-pix-first clearfix">

<div class="view view-sdg-impact-page view-id-sdg_impact_page view-display-id-block_2 view-dom-id-735e3592c6267da0604395442ff6c98c">

<div class="lead">
  </div>

<div class="view-impact">
  
        <div class="view-filters">
                </div>
  
    <div class="view-content-impact">
        <div>
    
<div id="img-click-sdg-332296" class="sdg-block-solo text-center" >
	<a class="impact-sdg-title">
		<div class="inside-impact-title">
			No poverty		</div>
	</a>
</div>  </div>
    </div>
  
        <div class="views-pager">
            </div>
    
<div class="lead">
  </div>

</div> 

</div>

</section>
<section id="block-views-e38d75a566d98546e16f91cf4e411ed1" class="block block-views col-xs-12 col-sm-12 col-md-10 col-lg-10 center-block sdg-class-block clearfix" style="display: none;">

        <h2 class="block-title">SDG 2 projects</h2>
    
  <div class="view view-sdg-s-lists-for-import-page-2017 view-id-sdg_s_lists_for_import_page_2017 view-display-id-sdg_2 view-dom-id-1383c4e5819ae713cf4b02b420f9c90e">
        
  
  
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
    
	<div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12">
		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					</div>
		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
			<h2 class="field-content">SDG 2</h2>			<p></p>
			<div class="sdg-ambass"> - </div>
			<div class="sdg-links">    </div>
			<div class="sdg-img-gallery sdg-effectback">
							
			</div>
		</div>
	</div>
  </div>
    </div>
  
  
</div>
</section>

<section id="block-views-sdg-impact-page-block-3" class="block block-views sdg-pix-first clearfix">

  

<div class="view view-sdg-impact-page view-id-sdg_impact_page view-display-id-block_3 view-dom-id-8f785cce6961f8aa91168d35c844e4fc">

<div class="lead">
  </div>



<div class="view-impact">
  
        <div class="view-filters">
                </div>
  
    <div class="view-content-impact">
        <div>
    
<div id="img-click-sdg-332306" class="sdg-block-solo text-center" style=">
	<a class="impact-sdg-title">
		<div class="inside-impact-title">
			Zero Hunger		</div>
	</a>
	
</div>  </div>
    </div>
  
      
        <div class="views-pager">
            </div>
    
<div class="lead">
  </div>

</div> <!-- /views-view -->

</div>

</section>
<section id="block-views-e64c24a7956cb576184ba38013f7788a" class="block block-views col-xs-12 col-sm-12 col-md-10 col-lg-10 center-block sdg-class-block clearfix" style="display: none;">

        <h2 class="block-title">SDG 3 projects</h2>
    
  <div class="view view-sdg-s-lists-for-import-page-2017 view-id-sdg_s_lists_for_import_page_2017 view-display-id-sdg_3 view-dom-id-939e64096495ca38b10a0e262e43bed3">
        
  
  
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
    
	<div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12">
		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					</div>
		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
			<h2 class="field-content">SDG project 3</h2>			<p></p>
			<div class="sdg-ambass"> - </div>
			<div class="sdg-links">    </div>
			<div class="sdg-img-gallery sdg-effectback">
							
			</div>
		</div>
	</div>
  </div>
    </div>
  
  
</div>
</section>

【问题讨论】:

    标签: jquery drupal click parentid


    【解决方案1】:

    jQuery('.impact-sdg-title').click(function() {
        var idPix2 = jQuery(this).closest('.sdg-pix-first').attr('id');
        var idProject2 = jQuery(this).closest('section').next('section.sdg-class-block').attr('id');    
        jQuery('#'+idProject2).toggle();
        console.log('idProject2:'+idProject2+' - idPix2:'+idPix2);
      });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <section id="block-views-sdg-impact-page-block-2" class="block block-views sdg-pix-first clearfix">
    
    <div class="view view-sdg-impact-page view-id-sdg_impact_page view-display-id-block_2 view-dom-id-735e3592c6267da0604395442ff6c98c">
    
    <div class="lead">
      </div>
    
    <div class="view-impact">
      
            <div class="view-filters">
                    </div>
      
        <div class="view-content-impact">
            <div>
        
    <div id="img-click-sdg-332296" class="sdg-block-solo text-center" >
    	<a class="impact-sdg-title">
    		<div class="inside-impact-title">
    			No poverty		</div>
    	</a>
    </div>  </div>
        </div>
      
            <div class="views-pager">
                </div>
        
    <div class="lead">
      </div>
    
    </div> 
    
    </div>
    
    </section>
    <section id="block-views-e38d75a566d98546e16f91cf4e411ed1" class="block block-views col-xs-12 col-sm-12 col-md-10 col-lg-10 center-block sdg-class-block clearfix" style="display: none;">
    
            <h2 class="block-title">SDG 2 projects</h2>
        
      <div class="view view-sdg-s-lists-for-import-page-2017 view-id-sdg_s_lists_for_import_page_2017 view-display-id-sdg_2 view-dom-id-1383c4e5819ae713cf4b02b420f9c90e">
            
      
      
          <div class="view-content">
            <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
        
    	<div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12">
    		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    					</div>
    		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
    			<h2 class="field-content">SDG 2</h2>			<p></p>
    			<div class="sdg-ambass"> - </div>
    			<div class="sdg-links">    </div>
    			<div class="sdg-img-gallery sdg-effectback">
    							
    			</div>
    		</div>
    	</div>
      </div>
        </div>
      
      
    </div>
    </section>
    
    <section id="block-views-sdg-impact-page-block-3" class="block block-views sdg-pix-first clearfix">
    
      
    
    <div class="view view-sdg-impact-page view-id-sdg_impact_page view-display-id-block_3 view-dom-id-8f785cce6961f8aa91168d35c844e4fc">
    
    <div class="lead">
      </div>
    
    
    
    <div class="view-impact">
      
            <div class="view-filters">
                    </div>
      
        <div class="view-content-impact">
            <div>
        
    <div id="img-click-sdg-332306" class="sdg-block-solo text-center" style=">
    	<a class="impact-sdg-title">
    		<div class="inside-impact-title">
    			Zero Hunger		</div>
    	</a>
    	
    </div>  </div>
        </div>
      
          
            <div class="views-pager">
                </div>
        
    <div class="lead">
      </div>
    
    </div> <!-- /views-view -->
    
    </div>
    
    </section>
    <section id="block-views-e64c24a7956cb576184ba38013f7788a" class="block block-views col-xs-12 col-sm-12 col-md-10 col-lg-10 center-block sdg-class-block clearfix" style="display: none;">
    
            <h2 class="block-title">SDG 3 projects</h2>
        
      <div class="view view-sdg-s-lists-for-import-page-2017 view-id-sdg_s_lists_for_import_page_2017 view-display-id-sdg_3 view-dom-id-939e64096495ca38b10a0e262e43bed3">
            
      
      
          <div class="view-content">
            <div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
        
    	<div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12">
    		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    					</div>
    		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
    			<h2 class="field-content">SDG project 3</h2>			<p></p>
    			<div class="sdg-ambass"> - </div>
    			<div class="sdg-links">    </div>
    			<div class="sdg-img-gallery sdg-effectback">
    							
    			</div>
    		</div>
    	</div>
      </div>
        </div>
      
      
    </div>
    </section>
    1. 您希望与 next 最接近以找到您要查找的课程的部分

    【讨论】:

    • 您确定 OP 中的 html 标记与您页面中的 html 标记相同吗? @NanaBrownee
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-28
    • 1970-01-01
    • 2017-11-29
    • 1970-01-01
    • 2013-02-23
    • 2015-09-15
    相关资源
    最近更新 更多