大静态HTML和jQuery显示/隐藏

-1

我正在学习jQuery，正如你可以从我上一个问题中看到的那样。现在我试着制作一个非常大的静态html，使其更具可导航性。大静态HTML和jQuery显示/隐藏

的HTML的一部分：

<a class="entryheader">...</a><br /><br /> 
<div class="entrycontent">...<br /> 
<p class="entryfoot">...</p> 

<a class="entryheader">...</a><br /><br /> 
<div class="entrycontent">...<br /> 
<p class="entryfoot">...</p>

我的JS：

$("a.entryheader").click(function(){ 
alert("clicked"); 
$(this).next("div.entrycontent").show(); 
});

Entrycontent默认是隐藏的，只能是在entryheader可见，如果用户点击。

如果我点击entryheader，我会得到消息框，但是entrycontent保持不可见状态。

我尝试了$（this）.next的不同方法，但都没有工作。

可能我缺乏对DOM模型的理解。你推荐什么工具和文件？

来源

2012-10-16 vbd

'的console.log（）;'是伟大的，搞清楚什么是错的。例如：'console.log（$（this）.next（））;'在你的点击事件中。 – Joonas

问题是next()寻找html中的下一个元素。在你的情况，你使用的是一堆BR标签作为分隔符，所以next()将是一个BR

最好的解决办法是使用你的代码并删除BR标签和使用CSS来申请保证金分离。

如果保持BR标签，你可以使用index()方法

$("a.entryheader").click(function(){ 
    var index=$("a.entryheader").index(this) 
    $("div.entrycontent").eq(index).show(); 
});

DEMO使用指数http://jsfiddle.net/fUeZE/

来源

2012-10-16 11:48:59 charlietfl

这样的工作对于所有可见但不匹配索引的entrycontent块都适用？ $（ “div.entrycontent”）NEQ（指数）.hide（）; – vbd

没有'neq（）'方法，但是由于jQuery链接，这是简单的'$（“div.entrycontent”）。hide（）。eq（index）.show（）;' – charlietfl

使用链接还是更好？就像if（$（'div.entrycontent'）。is（'：visible'））...？ – vbd

$(this).next('div.entrycontent')自锚标记后的下一个兄弟就不会选择你的情况什么是<br />标签。我将删除<br />标记并向锚点标记添加一些底边以创建相同的效果，然后您的.next代码将工作。

来源

2012-10-16 11:50:24 amurra

这：$（this）.next（）。next（）。next（“ div.entrycontent“）表示（）;将工作，但它是愚蠢的...我会再次尝试我的toc解决方案中使用的索引方法（前问题） – vbd

我同意这是愚蠢的，这不是解决方案。如果您删除多余的'
' HTML标记，那么您的原始代码将起作用，并且比选择使用'nextAll'或使用索引等所有兄弟更快。 – amurra

实现代码所需的另一种方法是使用jQuery的nextAll()遍历方法将所有下一个元素与.entrycontent类相匹配，但只是过滤到第一个像这样找到的类。

$("a.entryheader").click(function(){ 
    $(this).nextAll('div.entrycontent').first().show(); 
});

上 .first()

DEMO

更多信息和.nextAll()

来源

2012-10-16 11:55:11

大静态HTML和jQuery显示/隐藏

回答

相关问题