显示div并使用href =“＃id”隐藏其兄弟姐妹

I came across this website and the way its posts' info shows on click piqued my curiosity.

我遇到了这个网站，其帖子的信息显示点击方式激起了我的好奇心。

When <a class="data-icon-cont">link</a> is clicked, <div class="post-data">content</div> will appear.

单击链接时，将显示

content 。

How is it possible to show a div - that shares classes with other divs - and hide its siblings using href="#id"? Since I'm new to jquery, it'd be nice if you'd simplify the answer.

如何显示一个div - 与其他div共享类 - 并使用href =“＃id”隐藏其兄弟姐妹？由于我是jquery的新手，如果你简化了答案，那就太好了。

Also, at a look through its source code, this is the jquery code I found. However, due to my lack of knowledge in jquery, I can't seem to comprehend the code.

另外，看一下它的源代码，这是我发现的jquery代码。但是，由于我对jquery缺乏了解，我似乎无法理解代码。

$('.data-icon-cont a').click(function(){
    var id = $(this).attr('href');
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    $(this).parent().parent().find(id).fadeIn(0);
    $(this).parent().siblings('.post-data').not(id).fadeOut(0);
    return false;
});

3 个解决方案

#1

Let me break the code down from their website in a way that will hopefully help you to create the solution that you're looking for:

让我从他们的网站中删除代码，希望能帮助您创建您正在寻找的解决方案：

1. $('.data-icon-cont a').click(function(){ 
2.     var id = $(this).attr('href'); 
3.     $(this).addClass('active');
4.     $(this).siblings().removeClass('active');
5.     $(this).parent().parent().find(id).fadeIn(0);
6.     $(this).parent().siblings('.post-data').not(id).fadeOut(0); 
7.     return false 
8.  });

1. One line 1, they attached a click handler to the '.data-icon-cont a' elements. A click handler means that it monitors for when this element is clicked and then runs a function. If you're familiar with CSS, this means that it will effect all anchor (a) tags that are inside of an element with the class 'data-icon-cont'. When the click event is fired, the anonymous function in between the curly brackets will run (lines 2 - 7).

   一行1，他们将点击处理程序附加到'.data-icon-cont a'元素。单击处理程序意味着它监视单击​​此元素的时间，然后运行一个函数。如果您熟悉CSS，这意味着它将影响具有类“data-icon-cont”的元素内的所有锚（a）标记。触发click事件时，大括号之间的匿名函数将运行（第2 - 7行）。

   $('.data-icon-cont a').click(function(){ 
   

2. On line 2, they create a variable and store the name of the ID that we will be searching for in it. They find that variable by checking the href attribute of the element that was clicked.

   在第2行，他们创建一个变量并存储我们将在其中搜索的ID的名称。他们通过检查单击的元素的href属性来找到该变量。

   var id = $(this).attr('href');
   

Note: $(this) is an object that refers to the element on line 1, the element that was clicked.

注意：$（this）是一个对象，它引用第1行的元素，即被单击的元素。

3. On line 3, they selected the $(this) object and added the class 'active' to it.

   在第3行，他们选择了$（this）对象并将类“active”添加到其中。

   $(this).addClass('active');
   

4. On line 4, they selected the $(this) element, then they adjusted the selection using the .siblings() function which selected the siblings of the $(this) element. Then removed the class 'active' from those siblings. This ensures that only the clicked element has the class and that it is removed from all the other ones that may have been clicked previously.

   在第4行，他们选择$（this）元素，然后使用.siblings（）函数调整选择，该函数选择$（this）元素的兄弟。然后从那些兄弟姐妹中删除了“主动”课程。这样可以确保只有被点击的元素具有该类，并且它将从之前可能已被单击的所有其他元素中删除。

   $(this).siblings().removeClass('active');
   

5. On line 5, we begin looking for the elements that we want to show or hide. First they select the $(this) element. Then, by using the .parent() function they select it's parent container. Then they used the .parent() function again to select that elements parent container. They now have the grandparent container of the clicked anchor tag selected. This is the container that contains the elements that need to be hidden or shown. So now they search through the elements in that container looking for an element that has an id matching the variable that we fetched on line 2: .find(id). Then they faded it in with 0 marking the duration in miliseconds that the fade will take (It's instant).

   在第5行，我们开始寻找我们想要显示或隐藏的元素。首先，他们选择$（this）元素。然后，通过使用.parent（）函数，他们选择它的父容器。然后他们再次使用.parent（）函数来选择父元素的元素。他们现在已经选择了点击的锚标签的祖父母容器。这是包含需要隐藏或显示的元素的容器。所以现在他们搜索那个容器中的元素，寻找一个id匹配我们在第2行获取的变量的元素：.find（id）。然后他们用0标记淡入淡出将持续的毫秒数（它是即时的）。

   $(this).parent().parent().find(id).fadeIn(0);
   

6. They selected the $(this) element. They moved up one level with the parent() function. They selected all the siblings of that element that have the class 'post-data'. The filtered from that selection the elements that contained the id variable that we fetched on line two. And they faded out the matching elements.

   他们选择了$（this）元素。他们使用parent（）函数向上移动了一个级别。他们选择了具有“后数据”类的那个元素的所有兄弟姐妹。从该选择中筛选出包含我们在第二行获取的id变量的元素。他们淡出了匹配的元素。

   $(this).parent().siblings('.post-data').not(id).fadeOut(0);
   

7. return false means that the a tag should not fire off it's usual click event. It will only run this function and then stop. The browser will not attempt to navigate anywhere.

   return false表示a标签不应触发它的常用click事件。它只会运行此功能然后停止。浏览器不会尝试在任何地方导航。

   return false
   

8. They closed the function and the click handler that was opened on line 1.

   他们关闭了第1行打开的函数和单击处理程序。

   });
   

If you post HTML code that you're working with specifically, I can provide a specific example. Otherwise, you'll simply need to understand how this example works and modify to fit your own HTML.

如果您发布了您正在使用的HTML代码，我可以提供一个具体示例。否则，您只需要了解此示例的工作原理并进行修改以适合您自己的HTML。

#2

Let me guide you through the code.

$('.data-icon-cont a')

$ is a reference to jQuery itself. (In this case.) Inside the brackets you can pass in a selector. Now you can use the outcome this. In this case:

$是对jQuery本身的引用。 （在这种情况下。）在括号内，您可以传入选择器。现在你可以使用结果了。在这种情况下：

.click(function(){ 

});

A Click Handler is attached to every DOM-Element based on the selection above.

Click Clickler根据上面的选择附加到每个DOM-Element。

$(this)

inside the click handler function you can access "this". Which gives you the clicked DOM element. To call jQuery methods and other stuff on it it is quite common to wrap "this" in brackets with $ in front of it. What this does is, make a jQuery-Object of this. This is a bit more complicated in detail.

在单击处理函数内，您可以访问“this”。这为您提供了点击的DOM元素。要在其上调用jQuery方法和其他东西，将“this”包含在前面的$括号中是很常见的。这样做，制作一个jQuery-Object。这在细节上有点复杂。

 var id = $(this).attr('href');

So what this does is getting the href attribute of thi clicked element and stores that string inside the variable id.

所以这样做是获取被点击元素的href属性并将该字符串存储在变量id中。

$(this).addClass('active');

Add class of active to the clicked element.

将“活动”类添加到单击的元素。

$(this).siblings().removeClass('active');

Remove all occurrences of the class active on all siblings of the clicked element.

删除所有在所单击元素的所有兄弟节点上激活的类。

$(this).parent().parent().find(id).fadeIn(0);

This is a bit of an overkill but what it does is simply: find the element based on the variable "id" and show it immediately.

这有点矫枉过正，但它的作用很简单：根据变量“id”找到元素并立即显示。

in detail: it looks for the parent element, and then another parent. Then looks inside for the element, and fades it in in 0ms.

详细说明：它查找父元素，然后查找另一个父元素。然后在内部查找元素，并在0ms内淡入。

I suggest using this instead:

我建议改用：

$(id).show();

$(this).parent().siblings('.post-data').not(id).fadeOut(0); 

All other elements on the same level are faded out.

同一级别上的所有其他元素都会淡出。

return false;

Prevents the link to be followed. This is not ideal either, but does the job. There is another way to do this, but that requires a bit more understanding of jQuery and events. ( e.preventDefault(); )

阻止遵循链接。这也不是理想的，但是做到了。还有另一种方法可以做到这一点，但这需要对jQuery和事件有更多的了解。 （e.preventDefault（）;）

#3

    $(function() {
  $(".data-icon-cont a").on("click", function() {
    var _target = $(this).attr("href").split("#")[1];
    $(".post-data").hide();
    $(".post-data[id=" + _target + "]").show();
  })
})