使用相同的div來切換頁面的不同部分

Question

你好，我有以下代碼：

的Javascript/jQuery的：

$(document).ready(function() { 
$(".clickMe").click(function() { 
    $(".textBox").toggle(); 
}); 
}); 

HTML代碼印有一個循環：

<a class="clickMe">Toggle my text</a> 
<br /> 
<div class="textBox"> - This text will be toggled</div> 

<a class="clickMe">Toggle my text</a> 
<br /> 
<div class="textBox"> - This text will be toggled 2</div> 

<a class="clickMe">Toggle my text</a> 
<br /> 
<div class="textBox"> - This text will be toggled 3</div> 

我希望能夠：

1. 當頁面我想要將其隱藏並點擊切換。
2. 使用<a class="clickMe">和<div class="textBox">的相同ID可以切換或隱藏正確/等效的<div>元素。

的jsfiddle代碼：

http://jsfiddle.net/A7Sm4/3/ 

由於

• 編輯1：類代替標識
• 編輯2：固定的jsfiddle鏈路

Answer 1

$(document).ready(function() { 
$("a").click(function() { 
    $(this).parent().find("div").toggle(); 
}); 
}); 

使用類似這樣的東西。

Answer 2

ID應該是獨特

你應該使用class做到這一點

[編輯]更新的jsfiddle以適應馬爾科Dumic的解決方案：http://jsfiddle.net/SugvH/

Answer 3

試着在後面加上一個指數每對A/div的ID的（clickme1和TextBox1的等）。然後，當單擊a時，請閱讀該id，將索引從尾部移開，並顯示/隱藏具有相同索引的文本框。

Answer 4

像這樣的東西應該做的伎倆：

$(document).ready(function() { 
    var divs = []; 
    $(".textBox").each(function(index) { 
     divs[index] = this; 
    }); 
    $(".clickMe").each(function(index) { 
     $(this).click(function() { 
      $(divs[index]).toggle(); 
     }); 
    }); 
}); 

Answer 5

ID 必須（按照規範）在頁面上是唯一的。您可以輕鬆地重寫這個使用class屬性：

<a class="clickMe">Toggle my text</a> 
<br /> 
<div class="textBox"> - This text will be toggled</div> 

<a class="clickMe">Toggle my text</a> 
<br /> 
<div class="textBox"> - This text will be toggled 2</div> 

... 

首先，你需要或者隱藏div.textBox時DOM準備好，或使用CSS隱藏它。

然後您將單擊處理程序a.clickMe：

$(function() { 
    $('a.clickMe').click(function() { 
     // find first of following DIV siblings 
     // with class "textBox" and toggle it 
     $(this).nextAll('div.textBox:first').toggle(); 
    }); 
}); 

不過，也許你不控制標記，但迫切地需要這個工作，你可以保持您的標記，因爲它是和仍然使它因工作jQuery使用Sizzle框架來查詢可以強制限制document.getElementById()（僅返回一個元素）的DOM的事實。

E.g.假設你使用id而不是class，如果你編寫$('#clickMe')，你會得到只有一個元素的jQuery集合（jQuery內部使用.getElementById()來查找元素），但是如果你編寫$('#clickMe')，你會得到所有元素的集合id設置爲「clickMe」。這是因爲jQuery使用document.getElementsByTagName('a')來查找所有錨點，然後過濾掉其屬性值不是「clickMe」的元素（通過迭代和測試每個元素）。

在這種情況下，（你用你原來的標記），該代碼將工作：

$(function() { 
    $('a#clickMe').click(function() { 
     $(this).nextAll('div#textBox:first').toggle(); 
    }); 
}); 

再次，不這樣做，除非你絕對需要！