2012-05-16 44 views
24
<div class='hide'>A</div> 
<div class='hide'>B</div> 
<div class='hide' id='1'>C</div> 

Tengo una función llamada showOne que debe ocultar todos los elementos y luego mostrar uno con id = '1'.Jquery ocultar() todos los elementos con cierta clase excepto uno

function showOne(id) { 
// Hide all elements with class = 'hide' 
$('#'+id).show(); 
} 

¿Cómo puedo ocultar todos los elementos con class = 'hide' en jquery?

+2

solo una nota: no puede tener 'id' que comienza con número a menos que sea HTML5 – Bongs

Respuesta

40

Pruebe algo como:

function showOne(id) { 
    $('.hide').not('#' + id).hide(); 
} 

showOne(1);​ 

Demostración: http://jsfiddle.net/aymansafadi/kReZn/

Estoy de acuerdo con @TheSystemRestart sin embargo, "NOTA: NO USE ONLY ID numérico".

+0

+1 - Usar .not() es una solución mejor porque ahora no tiene que ocultar el elemento que desea mostrar y luego mostrarlo. Evitando el efecto de "parpadeo", creo que es una mejor experiencia de interfaz de usuario. – alieninlondon

+0

'$ ('. Hide: not (#' + id + ')'). Hide();' es esencialmente lo mismo también ... – Fr0zenFyr

+4

Solo quiero tomar un segundo y reconocer cuán mal escrito está el ejemplo, para un total novato, simplemente porque usted nombró a su clase 'ocultar' como el.función hide() que podría hacer que la gente piense que hay un vínculo entre los dos. Veo este patrón de nombres en todas partes y cuando estaba aprendiendo, me dolió ver esos ejemplos. – Edeph

4
$('div.hide').hide(300,function() { // first hide all `.hide` 
    $('#'+ id +'.hide').show(); // then show the element with id `#1` 
}); 

NOTA: No utilice solo ID numérico. NO PERMITIDO. READ THIS

+1

Los ID numéricos están permitidos en html5. ¿Conoce un navegador actual que no los admita? – nnnnnn

0

Casi me avergüenza de lo fácil que fue la solución y la encontré justo después de escribir la pregunta. Simplemente:

$('.hide').hide(); 
+0

Si lee un tutorial introductorio de jQuery (como uno de los que se encuentran en el sitio web de jQuery) puede aprender todo sobre los selectores más comunes (seleccionar por id, clase, nombre de etiqueta y seleccionar mediante relaciones padre/hijo, etc.), pero es esencialmente lo mismo que la sintaxis del selector de CSS. Una vez que te familiarices con eso, decidir qué método invocar a los elementos seleccionados (por ejemplo, '.hide()') es la parte fácil. – nnnnnn

+0

¿Qué hay de NO ocultar el elemento con id = "1"? ¡Tu propia respuesta no está respondiendo completamente tu propia pregunta! – Griknok

0

Puede ocultar todos los componentes con clase como ocultar el uso de . $ ('. Ocultar'). Ocultar();

0

Probar:

function showOne(id) { 
    $('.hide').hide(); 
    $('#'+id).show(); 
} 
3

Usted tiene que acceder a los elementos de nombre de la clase css. Para hacer esto, use . operador

$('.hide').hide(); 

Ocultará todos los divs.

Ahora muestra un div por id;

$('#elemID').show(); 

O también se puede hacer esto mediante el uso de

$('.hide').eq(0).show(); 

Primeramente se mostrará div tener clase ocultar.

Cuestiones relacionadas