¿Por qué mi div no intercambia por trabajo de clase?

Tiene problemas para convertir el siguiente código de tratar con ID a clases.

Básicamente lo que hace el código es revelar una Div mientras oculta otra.

En la versión original, era simple porque la ubicación div era absoluta.

Con la versión de clases, necesito revelar la siguiente instancia de ‘product-specs’ en función de qué DIV estaba ubicado el onClick.

NOTA / EDITAR: Son versiones múltiples de las mismas clases en la página. Por lo tanto, las referencias a las clases deben ser específicas para la instancia más cercana de la clase, según la ubicación del enlace en el que se hizo clic.

HTML:

Content

Javascript:

 function swap3(oldDivId, newDivId) { var oldDiv = document.getElementById(oldDivId); var newDiv = document.getElementById(newDivId); oldDiv.style.display = "none"; newDiv.style.display = "block"; } 

Sin embargo, ahora necesito agregar varias instancias de detalles del producto. Especificaciones de Div & Products

Nuevo HTML:

 

Content

Content

Nuevo Javascript:

????????

Nota: (explico el código completo antes, así que solo ponga la actualización aquí) recuerde que cuando su selector sea un className, ¡obtendrá una matriz! cambie el código como este y vuelva a probar:

 function swap3(currentDivId ,oldDivId, newDivId) { var oldDiv = $(currentDivId).nextAll("div." + oldDivId); var newDiv = $(currentDivId).nextAll("div." + newDivId); $(oldDiv).each(function(){ $(this).css({"display" : "none"}); }); $(newDiv).each(function(){ $(this).css({"display" : "block"}); }); } 

En JavaScript nativo, debe usar getElementsByClassName() , pero no es compatible con IE hasta la versión 8. Puede usar un script de envoltura especialmente diseñado como este , o utilizar una biblioteca como jQuery para abstraer las diferencias del navegador.

En jQuery, pruebe algo como

 function swap( oldClassName, newClassName ) { $("'." + oldClassName + "'").hide(); $("'." + newClassName + "'").show(); } 

Para ocultar el div ‘detalles’ y mostrar el div que se sigue inmediatamente, que se supone que es ‘especificaciones’, pruebe este fragmento de jQuery. Se conecta un controlador de clic a cada div ‘detalles del producto’, y cuando se dispara, oculta ese div y muestra su hermano inmediato:

 $(".product-details").click( function() { $(this).hide(); $(this).next().show(); }); 

El comportamiento inverso (ocultando las especificaciones y mostrando los detalles) se deja como un ejercicio para el lector 😉

Original:

 function swap3(oldDivId, newDivId) { var oldDiv = document.getElementById(oldDivId); var newDiv = document.getElementById(newDivId); oldDiv.style.display = "none"; newDiv.style.display = "block"; } 

jQuery:

 function swap3(oldDivId, newDivId) { var $oldDiv = $('#' + oldDivId); var $newDiv = $('#' + newDivId); $oldDiv.hide(); $newDiv.show(); } 

Clases jQuery:

 function swap3(oldDivClass, newDivClass) { var $oldDiv = $('.' + oldDivClass); var $newDiv = $('.' + newDivClass); $oldDiv.hide(); $newDiv.show(); } 

Otra cosa que puede hacer es envolver cada uno de sus productos dentro de un div sin ninguna clase o id. Tiene sentido agruparlos así, algo así como

 

Content

Content

Tenga en cuenta los divs adicionales de envoltura. Ahora puede usar el elemento principal para identificar las especificaciones del producto que debe mostrar. Ejemplo: (Tal vez haya una mejor manera de hacerlo)

 $('.product-details').click(function() { // Find the specs to show var $specs = $(this).siblings('.product-specs'); // Hide the other ones $('.product-specs').not($specs).hide(); // Show the one that you want $specs.show(); }); 

¡Espero que funcione!