jQuery的 - 顯示一個div由無ID的鏈接內容/類引用

Question

我有這樣的代碼：

function showContent() { 
    ... 
} 

<div id="example"> 
    content 
    <a href="#" onClick="showContent();return false">Link</a> 
</div> 

我想，當我點擊鏈接，顯示內容的div，沒有使用id或class作爲參考，但（可能）簡單的這個。

我該怎麼辦？

Answer 1

那麼，有沒有一個整體很多方面的，但是這是一個辦法：

<div id="example"> 
<p style="display: none;">content</p> 
<a href="#" onClick="showContent(this);return false">Show content above</a> 
</div> 

function showContent(el) { 
    $(el).parent().children(':first-child').show(); 
} 

http://jsfiddle.net/LeVFb/

或者，如果你想顯示的所有內（我不認爲:not真正重要*在這種情況下）：

function showContent(el) { 
    $(el).parent().children(':not(a)').show(); 
} 

*事實上，我會繼續前進，說把它關閉，除非你有沒有一個具體的理由：

function showContent(el) { 
    $(el).parent().children().show(); 
} 

這取決於您試圖顯示的內容以及是否有任何A標記是display: hidden並且需要顯示。

http://jsfiddle.net/LeVFb/2/

這可以去許多方面。

Answer 2

嘗試使用jQuery parent選擇

$(this).parent('div').show() 

然而，如何是鏈接可見，如果包含分區是不是？

Answer 3

如果鏈接是div內，你可以這樣做......

<a href="#" onClick="showContent(this);return false">Link</a> 

然後在你的函數...

function showContent(link){ 
    alert($(link).parent().html()); 
} 

然而，這種假設的股利是可見的已所以你不需要「展示」它。

Answer 4

你將必須包裝在<div>「內容」（或其他塊元素）：

<div id="example"> 
    <div style="display: none;">content</div> 
    <a href="javascript:void(0)" onClick="showContent(this)">Link</a> 
</div> 

不要爲這些類型的鏈接使用href="#"，href="javascript:void(0)"是一個更好的選擇導致更少的問題; void(0)方法還意味着您的點擊處理程序中不需要return false以防止瀏覽器嘗試解釋空的片段。

回到我們的定期計劃。然後，你showContent變得相當簡單：

function showContent(e) { 
    $(e).prev('div').show(); 
} 

更好的方法是使用jQuery的click處理程序綁定：

<div id="example"> 
    <div style="display: none;">content</div> 
    <a href="javascript:void(0)">Link</a> 
</div> 

然後：

$('#example a').click(function() { 
    $(this).prev('div').show(); 
});