Use el mismo div para alternar diferentes partes de la página

Hola tengo el siguiente código:

Javascript / jQuery:

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

Código HTML impreso con un bucle for:

 Toggle my text 
- This text will be toggled
Toggle my text
- This text will be toggled 2
Toggle my text
- This text will be toggled 3

Me gustaría poder:

  1. Cuando la página se carga, quiero que se oculte y alternar al hacer clic.
  2. Usar los mismos identificadores para y
    para poder alternar u ocultar el elemento

    correcto / equivalente.

código jsFiddle:

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

Gracias

  • Editar 1: Clase en lugar de Id
  • Edición 2: enlace fijo jsfiddle

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

Usa algo similar a esto

ID se supone que son únicos

deberías usar la clase para hacer esto

[EDIT] actualizó jsfiddle para que se ajuste a la solución de Marko Dumic: http://jsfiddle.net/SugvH/

Algo como esto debería hacer el truco:

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

ID debe (según la especificación) ser único en la página. Puede reescribir fácilmente esto para usar el atributo de class :

 Toggle my text 
- This text will be toggled
Toggle my text
- This text will be toggled 2
...

Inicialmente, necesita ocultar div.textBox cuando DOM esté listo, u ocultarlo usando CSS.

Luego, adjuntas manejadores de a.clickMe a 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(); }); }); 

Sin embargo, tal vez no controle el marcado, pero necesita hacerlo con desesperación, puede mantener su marcado tal como está y aún así hacerlo funcionar debido a que jQuery usa el marco de Sizzle para consultar el DOM que puede forzarse en torno a la limitación de document.getElementById() (que devuelve solo un elemento).

Por ejemplo, supongamos que utilizaste id lugar de class , si escribes $('#clickMe') , obtendrás la colección jQuery de un solo elemento (jQuery usado internamente .getElementById() para encontrar el elemento), pero si escribes $('#clickMe') , obtienes la colección de todos los elementos con el id establecido en “clickMe”. Esto se debe a que jQuery usó document.getElementsByTagName('a') para buscar todos los anclajes y luego filtrar los elementos (iterando y probando cada elemento) cuyo valor de atributo no es “clickMe”.

En ese caso (usó su marcado original), este código funcionará:

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

De nuevo, ¡no hagas esto a menos que lo necesites absolutamente!

Intente agregar un índice a cada par de identificadores de un / div (clickme1 y textbox1, etc.). Luego, cuando se hace clic en una a, lea la identificación, retire el índice del final y muestre u oculte la caja de texto con el mismo índice.