告訴jQuery哪個（唯一的）div在

上做一個動作我的計劃是有很多盒子（未定義的數量）。當一個框下單擊顯示框時，它會顯示該框。告訴jQuery哪個（唯一的）div在

我在我的html中有一些獨特的div。該DIV通過由獨特：

<div id="box-<%=box.id%>"></div>

在我application.js，我有

$('.show-box > a').click(function(){ 
$('#box').show(); 
});

我顯然需要有在$('#box').show();部分箱ID，但我不確定該怎麼做。 ..

編輯：添加更多信息

<div class="show-box"> 
    <a href="javascript:void(0)">Show</a> 
</div> 

<div class="box" id="box-<%= box.id %>"></div>

的類是ST yling。

只要添加，我知道JavaScript鏈接應鏈接到一個實際的鏈接。我稍後會解決這個問題。

來源

2010-10-12 irl_irl

你會使用this的處理程序內指被點擊的具體.show-box > a。

因此，這取決於您想要顯示的元素與box元素之間的關係。

當你說下，如果這意味着它是一個同級的.show-box元素，你可以use .parent()從<a>竄動，然後use .prev()穿越回box。

$('.show-box > a').click(function() { // "this" refers to the <a> that was clicked. $(this).parent().prev().show(); });

最終，正確的解決方案取決於您的實際HTML標記。如果你在你的問題中提供這個，這將會有所幫助。

如果需要，您可以通過ID選擇，但通常沒有必要。

來源

2010-10-12 16:06:19 user113716

謝謝你的回答。我已將我的HTML添加到問題中。盒子不是兄弟姐妹。下是使用錯誤的詞。 – 2010-10-12 16:18:30

@GreenRails - 我想問題是''.show-box'和它相關的'box'的位置之間是否存在一些一致的關係？ – user113716 2010-10-12 16:34:38

啊哈！由於該框位於鏈接「$（this）.parent（）。prev（）。show（）;」之下沒有工作。將prev（）更改爲next（）修復了它。感謝您的幫助！ – 2010-10-12 16:44:41

不知道我理解你的問題，但如果你想顯示點擊框：

$('.show-box > a').click(function(){ 
$(this).parents('.show-box').show(); 
});

來源

2010-10-12 16:05:25

我不認爲'show-box'與需要顯示的「盒子」相同。如果是，那麼''元素也會被隱藏，而且你不能點擊它。：o） – user113716 2010-10-12 16:09:05

在簡單的方法是將後您命名箱ID的ID或寫另一個屬性到一個。例如，如果您的標籤ID爲「anchor1」，請將相應的div分配給「box-anchor1」。然後，像這樣引用它：

$('.show-box > a').click(function(){ 
$('#box' + this.attr('id')).show(); 
});

來源

2010-10-12 16:05:54

「a」沒有ID。這只是我可以點擊進行操作的鏈接。 – 2010-10-12 16:24:12

如果框，顯示它在邏輯上相關的鏈接，您可以通過以下跳過整個唯一ID業務：

HTML

<div class="container"> 
    <div class="box"> 
    <!-- stuff in the box --> 
    </div> 
    <a href="#">Show</a> 
</div>

jQuery的

$("div.container a").click(function() { 
    $(this).prev().show(); // prev() will get the div.box element. 
});

另一方面，如果它們在結構上不相關，則可以使用URL的片段部分引用盒ID：

HTML

<div> 
    <div class="box" id="box-1">...</div> 
    <div class="box" id="box-2">...</div> 
</div> 

<div> 
    <a class="boxtoggler" href="#box-1">Show Box 1</a> 
    <a class="boxtoggler" href="#box-2">Show Box 2</a> 
</div>

jQuery的

$("a.boxtoggler").click(function() { 
    var boxId = $(this).attr("href"); 
    $(boxId).show(); 
});

注意我們是如何濫用的事實，URL的片段部分之前有一個#字符使其成爲一個css ID;）

來源

2010-10-12 16:52:22 Jacob

告訴jQuery哪個（唯一的）div在

回答

相關問題