Como manejar varios objetos en javaScript

Citar

Escrito el 13 Oct 2010 10:49 pm

Hola, lo que pasa es que quiero ahorrar codigo y efectuar un evento para varias imagenes en teoria crei que al hacer esto:

$(document).ready(function(){
//Botones grandes evento clic
$("#cuidados").click(function(event){
$(this).hide("normal");
});

});

A todo <div> que se llamara id="cuidados" cuando se le diera click desapareceria.. pero solo ocurre con el primer elemento.

Como puedo hacer para que se ejecute en todos??
sin escribir uno por uno.

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 14 Oct 2010 01:37 am

En vez de id, usa class:

Código HTML :

<!doctype html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.cuidados {
   border: 1px solid blue;
}
</style>
<script type="text/javascript">
function Esconder() {
   $(".cuidados").hide();
}
</script>
</head>
<body>
<div class="cuidados">Div 1</div>
<div class="cuidados">Div 2</div>
<div class="cuidados">Div 3</div>
<div class="cuidados">Div 4</div>
<button onClick="Esconder();">Esconder</button>
</body>
</html>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 14 Oct 2010 03:41 pm

Antes que nada gracias por contestar esta bien lo que pusiste, nadamas que creo que no me explique bien.. el problema radica en que con este codigo que me enviaste
si yo tengo 5 textos en diferentes ubicaciones de mi pagina.. al pasar sobre uno solo de ellos pufs se esconderan todos..
y lo que deseo es que solo desaparesca el que quiera.. de momento para no escribir mucho codigo puse un bucle y ahi
llamo a cada div por un nombre.. y con PHP declaro los div con ese nombre y funciona pero megustaria hacerlo solo con javascript.

ejemplo:

Texto1 Texto2 Texto3 Texto4 Texto5

seria como hacer un arreglo o algo asi, paraque solo desaparesca al que se le haga click pero sin que desaparescan todos
y no quiero declarar un id o una clase para cada uno.

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 14 Oct 2010 06:25 pm

A ver si nos entendemos de una vez. En el DOM de tu HTML cada id debe ser único, es decir solo puede haber un <div> cuyo id sea "cuidados", si hay dos, el DOM tomará solo el primero e ignorará los restantes como si no tuvieran id. Sin embargo sí puede haber más de un elemento en el DOM que tenga el mismo class.

Volvamos al código que has puesto en tu primer mensaje. Allí dices básicamente que cuando se haga clic el elemento donde se hizo clic éste debe esconderse, o al menos esa era tu intención. La pregunta es cómo sabe JavaScript cuál elemento es el que debe esconder?, eso se lo dice el objeto "this", que significa en este caso "el objeto que ha recibido el evento click". Ahora que he entendido lo que quieres hacer, me parece que lo único que debes hacer es poner un class igual en todos los divs donde desees esta funcionalidad y en JQuery agregar el evento a todos los divs que tengan esa class. Y listo:

Código HTML :

<!doctype html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.cuidados {
   border: 1px solid blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){ 
//Botones grandes evento clic 
$(".cuidados").click(function(event){
$(this).hide();
}); 

});
</script>
</head>
<body>
<div class="cuidados">Div 1</div>
<div class="cuidados">Div 2</div>
<div class="cuidados">Div 3</div>
<div class="cuidados">Div 4</div>
</body>
</html>

Enjoy

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 15 Oct 2010 06:49 pm

ok ok parece ser lo que necesito.. ese dato de los id y las clases no lo sabia pero ahora que lo mencionas parece ser mi solucion... gracias lo checare y el lunes te digo gracias de antemano

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 18 Oct 2010 07:09 pm

Disculpa que use este mismo hilo para hacer la siguiente pregunta es solo que me entendiste a lo que queria..
es sobre la anterior pregunta. con lo que me mencionaste logre hacer lo que deseaba, pero como puedo detectar a cual de los div se le dio clic?? y en base a ello hacer algo?

Encontre algo que creo que podria utilizar pero no tengo ni idea de como implementarlo es sobre algo llamado heach
Me podrias ayudar de favor..

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 18 Oct 2010 08:21 pm

Código HTML :

<!doctype html> 
<html lang="es-AR"> 
<head> 
<meta charset="UTF-8"> 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){  
//Botones grandes evento clic  
$(".cuidados").click(function(event){ 
$(this).hide(); 
alert("Escondí el div: "+$(this).attr("id"));
});  
 
}); 
</script> 
<style type="text/css"> 
.cuidados { 
   border: 1px solid blue; 
} 
</style> 
</head> 
<body> 
<div class="cuidados" id="div1">Div 1</div> 
<div class="cuidados" id="div2">Div 2</div> 
<div class="cuidados" id="div3">Div 3</div> 
<div class="cuidados" id="div4">Div 4</div> 
</body> 
</html>

Enjoy... again

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 18 Oct 2010 08:26 pm

Uhmm... luego de pensar un poco se me ocurrió que esto es más cómodo:

Código HTML :

$(document).ready(function(){  
//Botones grandes evento clic  
$(".cuidados").click(function(event){ 
$(this).hide(); 
a = $(this).get(0); // Ahora 'a' es una referencia dirrecta al elemento.
alert("Escondí el div: "+a.id);
});  
 
});

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 18 Oct 2010 10:31 pm

ok muy buena opcion me agrada yo estaba batayando con each tambien me funciono coloque asi:

$(".clase").each(function(i){

$(this).click(function(event){
//Loque se ara con el div cliqueado
});
});

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Como manejar varios objetos en javaScript

Escribe una respuesta rapida