jquery - 다른 이미지를 클릭하면 동일한 ID가 반환됩니다.

나는 한동안이 문제에 시달렸습니다.jquery - 다른 이미지를 클릭하면 동일한 ID가 반환됩니다.

내 페이지에는 17 개의 이미지와 17 개의 숨겨진 블록이 있습니다. 각 이미지는 CSS에서 바로 아래에있는 특정 블록을 표시합니다.

다음은 클릭 할 이미지와 시도한 jquery입니다.

어떤 이미지를 클릭해도 항상 동일한 ID가 저장됩니다.

이 사이트는 드루팔 (Drupal에 있습니다.)이 많아서 섹션 ID에 제대로 도달하지 못했다고 생각합니다. 궁극적으로 내가하고 싶은 것은 ID를 변수에 저장 한 다음 ID의 목록을 검토하고 적절한 블록을 표시하는 것입니다. 내가 이해가 되니? 나는 당신이 섹션을 찾기 위해 다음과 가장 가까운 원하는

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" > 
 
\t <a class="impact-sdg-title"> 
 
\t \t <div class="inside-impact-title"> 
 
\t \t \t No poverty \t \t </div> 
 
\t </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"> 
 
    
 
\t <div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
\t \t \t \t \t </div> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
 
\t \t \t <h2 class="field-content">SDG 2</h2> \t \t \t <p></p> 
 
\t \t \t <div class="sdg-ambass"> - </div> 
 
\t \t \t <div class="sdg-links"> </div> 
 
\t \t \t <div class="sdg-img-gallery sdg-effectback"> 
 
\t \t \t \t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </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="> 
 
\t <a class="impact-sdg-title"> 
 
\t \t <div class="inside-impact-title"> 
 
\t \t \t Zero Hunger \t \t </div> 
 
\t </a> 
 
\t 
 
</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"> 
 
    
 
\t <div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
\t \t \t \t \t </div> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
 
\t \t \t <h2 class="field-content">SDG project 3</h2> \t \t \t <p></p> 
 
\t \t \t <div class="sdg-ambass"> - </div> 
 
\t \t \t <div class="sdg-links"> </div> 
 
\t \t \t <div class="sdg-img-gallery sdg-effectback"> 
 
\t \t \t \t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    </div> 
 
    </div> 
 
    
 
    
 
</div> 
 
</section>

출처

2017-05-23 NanaBrownee

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" > 
 
\t <a class="impact-sdg-title"> 
 
\t \t <div class="inside-impact-title"> 
 
\t \t \t No poverty \t \t </div> 
 
\t </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"> 
 
    
 
\t <div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
\t \t \t \t \t </div> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
 
\t \t \t <h2 class="field-content">SDG 2</h2> \t \t \t <p></p> 
 
\t \t \t <div class="sdg-ambass"> - </div> 
 
\t \t \t <div class="sdg-links"> </div> 
 
\t \t \t <div class="sdg-img-gallery sdg-effectback"> 
 
\t \t \t \t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </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="> 
 
\t <a class="impact-sdg-title"> 
 
\t \t <div class="inside-impact-title"> 
 
\t \t \t Zero Hunger \t \t </div> 
 
\t </a> 
 
\t 
 
</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"> 
 
    
 
\t <div class="sdg-row-per-sdgs col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
\t \t \t \t \t </div> 
 
\t \t <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
 
\t \t \t <h2 class="field-content">SDG project 3</h2> \t \t \t <p></p> 
 
\t \t \t <div class="sdg-ambass"> - </div> 
 
\t \t \t <div class="sdg-links"> </div> 
 
\t \t \t <div class="sdg-img-gallery sdg-effectback"> 
 
\t \t \t \t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    </div> 
 
    </div> 
 
    
 
    
 
</div> 
 
</section>

JQuery와에없는 확신으로

도움이 많이 주시면 감사하겠습니다 찾고 계시는 수업

출처

2017-05-23 17:42:21 guradio

내 페이지에 적용 할 때 '정의되지 않음'을 반환합니다 .. – NanaBrownee

OP의 html 마크 업과 페이지의 html 마크 업이 동일합니까? @NanaBrownee – guradio

jquery - 다른 이미지를 클릭하면 동일한 ID가 반환됩니다.

답변

관련 문제