Question

我有一组隐藏的div，它们都具有相同的类，但具有唯一的自动生成的ID。我也有缩略图，其ID与隐藏的div完全相同。

点击缩略图时，它的ID存储在变量clickedId中，如下所示：

var clickedId = $(this).attr("id");

但我无法弄清楚如何找到具有该特定ID的隐藏div，以便可以使用相同的点击显示。

这是显示要取消隐藏的div的相关HTML。

<div id="projectHolder">
   <div class="project-content" id="project-<?php echo $post->post_name;?>">                                
   <p>Div content</p>
   </div>

   <div class="project-content" id="project-<?php echo $post->post_name;?>">                                
   <p>Div content</p>
   </div>
</div>

我尝试过这方面的变化，但主要是我的猜测：

$('.project-content').find().each(function(){
if ($this.is(clickedId)).fadeIn(); 
});

有任何建议指出我正确的方向吗？

Answer 1

如果您使用了课程，则可以执行以下操作：

$(".project-content").click(function(){
  $('.project-content').not(this).fadeToggle();
});

Answer 2

在缩略图上使用HTML5 data-* attribute，其中包含单击缩略图时应相应显示的元素的ID（或选择器）。

<div data-open-target="#foo">...</div>

然后：

var clicked = $(this).data('open-target');
// later
$(clicked).fadeIn();

Answer 3

未经测试，但应该让你去。

$('#projectHolder').children("#" + clickedId).fadeIn();

另外，如前所述，考虑切换到类，以便页面上没有重复的ID。

使用jQuery查找匹配的ID

3 个答案: