让我指导您完成代码。

Question

我遇到了这个website及其帖子的方式＆＃39;点击信息显示我的好奇心。

点击<a class="data-icon-cont">link</a>后，系统会显示<div class="post-data">content</div>。

如何显示div - 与其他div共享类 - 并使用href="#id"隐藏其兄弟姐妹？由于我是jquery的新用户，如果您简化答案，那就很好。

另外，看一下它的源代码，这是我发现的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;
});

Answer 1

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

>>> time = '15:53:09'
>>> time.split(':')
['15', '53', '09']
>>> [int(v) for v in time.split(':')]
[15, 53, 9]
>>> int(time)  # expect exception
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: invalid literal for int() with base 10: '15:53:09'
>>>

第1行，他们将点击处理程序附加到'.data-icon-cont a'元素。单击处理程序意味着它监视单击此元素的时间，然后运行函数。如果您熟悉CSS，这意味着它将影响具有类“data-icon-cont”的元素内的所有anchor（a）标记。触发click事件时，大括号之间的匿名函数将运行（第2 - 7行）。
```
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.  });
```
在第2行，他们创建一个变量并存储我们将在其中搜索的ID的名称。他们通过检查单击的元素的href属性来找到该变量。
```
$('.data-icon-cont a').click(function(){ 
```

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

在第3行，他们选择了$（this）对象并将类“active”添加到其中。
```
var id = $(this).attr('href');
```
在第4行，他们选择了$（this）元素，然后他们使用.siblings（）函数调整了选择，该函数选择了$（this）元素的兄弟。然后从那些兄弟姐妹中删除了“主动”课程。这样可以确保只有被点击的元素具有该类，并且该元素将从之前可能已被单击的所有其他元素中删除。
```
$(this).addClass('active');
```
在第5行，我们开始寻找我们想要显示或隐藏的元素。首先，他们选择$（this）元素。然后，通过使用.parent（）函数，他们选择它的父容器。然后他们再次使用.parent（）函数来选择父元素的元素。他们现在已经选择了点击的锚标签的祖父母容器。这是包含需要隐藏或显示的元素的容器。所以现在他们搜索那个容器中的元素，寻找一个id匹配我们在第2行获取的变量的元素：.find（id）。然后他们用0标记淡入淡出将持续的毫秒（这是瞬间）。
```
$(this).siblings().removeClass('active');
```
他们选择了$（this）元素。他们使用parent（）函数向上移动了一个级别。他们选择了该元素中具有“后数据”类的所有兄弟姐妹。从该选择中筛选出包含我们在第二行获取的id变量的元素。他们淡出了匹配的元素。
```
$(this).parent().parent().find(id).fadeIn(0);
```
return false表示a标签不应触发它的常用点击事件。它只会运行此功能然后停止。浏览器不会尝试在任何地方导航。
```
$(this).parent().siblings('.post-data').not(id).fadeOut(0);
```
他们关闭了第1行打开的函数和点击处理程序。
```
return false
```

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

Answer 2

让我指导您完成代码。

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

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

.click(function(){ 

});

点击处理程序根据上面的选择附加到每个DOM元素。

$(this)

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

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

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

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

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

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

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

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

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

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

我建议改用：

$（id）.show（）;

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

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

return false;

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

Answer 3

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

显示div并使用href =＆＃34;＃id＆＃34;隐藏其兄弟姐妹。

3 个答案:

让我指导您完成代码。

$（id）.show（）;