大靜態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顯示/隱藏

回答

相關問題