jquery i + 1顯示/隱藏

Question

如何在點擊時顯示/隱藏元素，當它具有從一個樣式開始的各種樣式時。我首先需要的子項被點擊 - 顯示1項等

代碼是這樣的：提前

$('sub-item-' + (i + 1)).click -> 
    $('item-' + (i + 1)).show() 
    #coffeescript 

<div class="item-1">1</div> 
<div class="item-2">2</div> 
<div class="item-3">3</div> 
<div class="item-4">4</div> 
etc.. 

<a href="#" class="sub-item-1">Click 1</a> 
<a href="#" class="sub-item-2">Click 2</a> 
<a href="#" class="sub-item-3">Click 3</a> 
<a href="#" class="sub-item-4">Click 4</a> 
etc.. 

謝謝！

Answer 1

與您具體例如，你可以使用attribute starts with selector，然後解析被點擊的實際元素的類名。但我不會這麼做，它很脆弱。 （例如，假設你爲你的class屬性添加了第二個類？這會使解析變得複雜，並且如果你把它放在sub-item-*類之前，就會搞亂選擇器。）相反，我可能會使用物品的位置在其容器中（如果可以的話），或者將標記更改爲使用data-*屬性。

下面是假設你的項目在其容器內的唯一一個例子：

Live example | source

<!-- (The 'items' are unchanged) -->  

<div><!-- the container, this div is just an example --> 
    <a href="#" class="sub-item">Click 1</a> 
    <a href="#" class="sub-item">Click 2</a> 
    <a href="#" class="sub-item">Click 3</a> 
    <a href="#" class="sub-item">Click 4</a> 
</div> 

然後可以使用index找出被點擊其格：

$(".sub-item").click(function() { 
    var $this = $(this), 
     index = $this.index() + 1; 
    $(".item-" + index).show(); // Or toggle, whatever 
    return false; 
}); 

（您需要+ 1因爲index是從零開始。）

但如果他們不是容器中唯一的東西，可以使用data-*屬性：

Live example | source

<!-- (The 'items' are unchanged) -->  

<div><!-- the container, this div is just an example --> 
    <a href="#" class="sub-item" data-index="1">Click 1</a> 
    <a href="#" class="sub-item" data-index="2">Click 2</a> 
    <a href="#" class="sub-item" data-index="3">Click 3</a> 
    <a href="#" class="sub-item" data-index="4">Click 4</a> 
</div> 

...這使得它很容易：

$(".sub-item").click(function(e) { 
    var $this = $(this), 
     index = $this.attr("data-index"); 
    $(".item-" + index).show(); // Or toggle, etc. 
    return false; 
}); 

Answer 2

我建議（在 '純' 的jQuery）：

$('div[id^="item-"]').click(
    function(){ 
     $('a.' + this.id).toggle(); 
    }); 

參考文獻：

• attribute-starts-with ([attribute^="value"]) selector。

Answer 3

您可以使用此選擇器來選擇與特定的類名

$('a[class^="sub-item-"]') 

嘗試啓動所有錨標籤這

$('a[class^="sub-item-"]').on('click', function(e) { 
    e.preventDefault(); 

    var $parts = this.className.split('-'); 

    var $class = $parts[1] + '-' + $parts[2]; 

    $('div').hide(); 

    $('.' + $class).show(); 
})​ 

Check FIDDLE