我已经挣扎了一段时间。
在我的页面上，我有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>
答案 0 :(得分：0)
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>