显示nth:div 1，当我点击第n次：anchor

Question

晚上好，对 Whosebug 有帮助的人，

我想隐藏 **点击的 ** .project-tile-normal 并显示适当的描述 div .detail-tile.

我通读了一些关于我的问题的文章，但我运行进入了我脑海中的逻辑砖墙。不用说，我是 jquery 的初学者，也许有更好的方法，只是我没找到。

这是我到目前为止发现的 "answers":
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

我是不是应该把所有的Item都放在一个数组里，然后再数出来？提前感谢您的帮助。

Answer 1

您在 HTML 中声明类错误。它将是 project-tile-normal 而不是 .project-tile-normal。这样做后，您会发现您的活动正常进行。然后您实际上可以按照这些教程在项目标题点击时实现您想要的行为。

Answer 2

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

现在您可以使用 index() and eq()、

完成剩下的工作

$('.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();
});

<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>

Answer 3

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

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

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

Working example

显示nth:div 1，当我点击第n次：anchor

Show nth:div 1, when i click nth: anchor

javascript

arrays

jquery

getelementbyid

hide