Question

晚上有用的人有关stackoverflow，

我想隐藏**点击** .project-tile-normal并显示相应的说明div .detail-tile。

我读了一些关于我的问题的文章，但是我脑子里碰到了一个逻辑砖墙。不用说，我是jquery的初学者，也许有更好的方法可以做到这一点，我只是没有找到它。

这是我迄今为止所发现的＆＃34;答案＆＃34;：
Hide Children, Show nth Child - 我问题的最接近答案
Show and Hide Several Links - 此解决方案令我头晕目眩

我的HTML由两行div组成，类似于简化表示：

<div class="wrapper">
 <div class=".project-tile-normal">some pictures</div>
 <div class=".project-tile-normal"></div>
 <div class=".project-tile-normal"></div>

 <div class=".detail-tile">description</div>
 <div class=".detail-tile"></div>
 <div class=".detail-tile"></div>
</div>

这是我到目前为止编码的内容：

JQUERY

$(document).ready(function(){
 $('.project-tile-normal').on("click", function() {
 if( $(this).hasClass("active") ) {
     $(this).fadeOut(150);
 } else {
   var itemid = '#div' + $(this).attr('target'); // my own try to get the Element of the divs.
   console.log(itemid);
   $(this).addClass("active");
 $(".detail-tile").removeClass("hidden");
 }
});

$('button').on("click", function(){
  $(".detail-tile").addClass("hidden");
  $(".project-tile-normal").fadeIn(150);
  $(".project-tile-normal").removeClass("active");
 });
});//document ready

我应该将所有项目放在一个数组中然后计算出来吗？感谢您的帮助。

Answer 1

首先删除class属性之前的.，因为不需要它。根据jQuery代码，不需要它。如果您使用.，则需要使用\.转义它，在jQuery选择器中它可能类似于$('.\\.project-tile-normal')。

现在，您可以使用 index() 和 eq() 完成剩下的工作，

＆＃13;

$('.project-tile-normal').click(function() {
  // you can use toggle if you want toggle between the show and hidden
  // else use show method
  $('.detail-tile').eq($(this).index()).toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="project-tile-normal">some pictures</div>
  <div class="project-tile-normal">1</div>
  <div class="project-tile-normal">2</div>

  <div class="detail-tile">description</div>
  <div class="detail-tile">1</div>
  <div class="detail-tile">2</div>
</div>

＆＃13;

Answer 2

您在HTML中声明您的课程有误。它将 project-tile-normal 而不是 .project-tile-normal 。在这样做时，您将发现您的活动正在发挥作用。然后，您可以实际按照这些教程在项目标题点击中实现所需的行为。

Answer 3

首先请注意，HTML中的class属性不应包含任何.个字符。

关于JS，您可以通过从单击的元素中检索index()然后使用eq()选择匹配的必需元素来按索引链接元素，如下所示：

$('.project-tile-normal').click(function() {
    var index = $(this).index();
    $('.detail-tile').hide().eq(index).show();
});

Working example

显示第n：div 1，当我点击第n个：锚点

3 个答案: