Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] acceder con $(this) a 2 variables independientes

Estas en el tema de acceder con $(this) a 2 variables independientes en el foro de Jquery en Foros del Web. el caso es que tengo dos animaciones en javascript y jquery que utilizo el operador $(this) para comprobar el nombre de un tag y mostrar ...
  #1 (permalink)  
Antiguo 30/01/2013, 20:11
 
Fecha de Ingreso: febrero-2006
Mensajes: 233
Antigüedad: 18 años, 1 mes
Puntos: 3
acceder con $(this) a 2 variables independientes

el caso es que tengo dos animaciones en javascript y jquery que utilizo el operador $(this) para comprobar el nombre de un tag y mostrar una información por pantalla.

el problema es que cambia el $(this) para ambas variables, y cuando una info es mostrada bien, la otra no se muestra.

en una tomo una variable y en otra hago una animación para hover
Cita:
//son distintas acciones para distintas objetos
var $marca01 = $(this).children('span#marca01b').text();
$('#showMarca').text($marca01 );
....
//y aquí para animar
$this.stop().animate({'opacity':'1.0','height':'25 0px','top':'-66.5px','left':'-50px'});
(si en vez del $(this) pongo directamente el ID del tag, #showMarca muestra por pantalla el valor de todas las 5 marcas, por lo que no sirve)
Seguro que estoy pasando algo por algo. ¿Alguna opción?
Muchas gracias
  #2 (permalink)  
Antiguo 30/01/2013, 21:06
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: acceder con $(this) a 2 variables independientes

Si el span que tiene el texto tiene un id y los ide deben de ser únicos, no tiene sentido el $(this).chidren

Por otra parte el $(this) se usa para diferenciar entre elementos de un mismo selector, con lo que logragrás que el evento solo se genera en el elemento que lo recibe, a ver un ejemplo

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9. //<![CDATA[
  10. $(document).ready(function(){
  11.  
  12.    $('button').click( function (){
  13.        var marca = $('#marca01b').text();
  14.         $('button').text(marca); // modifica todos los botones
  15.     //  $(this).text(marca); // solo el boton clickeado, comentar anterior y descomentar este
  16.      
  17.        
  18.    });
  19.  
  20. });
  21. //]]>
  22. </head>
  23.     <button>cambiar este texto</button>
  24.     <button>cambiar este texto</button>
  25.     <button>cambiar este texto</button>
  26.     <span id="marca01b">texto en marca01b</span>
  27. </body>
  28. </html>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 31/01/2013, 19:30
 
Fecha de Ingreso: febrero-2006
Mensajes: 233
Antigüedad: 18 años, 1 mes
Puntos: 3
Respuesta: acceder con $(this) a 2 variables independientes

gracias emprear, tu ejemplo es bueno pero tengo una página en la que uso 3 funciones jquery:

- 1ª: Ventana con distintas pestañas. Cada una contiene información diferente.

- 2ª: Una vez clicas en una pestaña se muestran 5 imágenes de 5 marcas. Al pasar el ratón por encima de una de ellas (hover), te muestra el nombre de la marca y una pequeña descripción. Con el $(this) accedo al nombre de dicha marca y descripcion para mostrarla en dos etiquetas <p>
Y cuando le das a clic a una de las 5 imágenes, te aparecen debajo los 7 productos de cada marca. La idea es evitar página intermedias.
Código:
var $descripcionMarca = $(this).children('span#descripcionMarca').text();
$('p#show_descripcionMarca').text($descripcionMarca );
El span#descripcionMarca (como comentas emprear) no es único, cada una de las 5 marcas comparten el mismo ID para no tener que copiar x 5 la misma función de jquery:

Código:
<li class='tab_marcasDistribuidor'>
<a href="#distribuidor5">
<img class="" src="image.jpg" alt="logoNike"/>
<span id="Marca">Nike</span>
<span id="descripcionMarca">Material deportivo. Todos los deportes. Just Do It.</span>											
</a>
</li>
- 3ª: Y en esta, siguen habiendo las pestañas, debajo las 5 marcas (con el texto y la descripción visibles de la marca que hemos seleccionado) y debajo los 7 productos de la marca. Cuando pasamos por encima de un producto (hover), vuelve a aparecer otro texto y es aquí donde está el problema. Dicho hover hace que pierda el nombre y la descripcion antes cargadas arriba.

He puesto parte de código y jquery en otro .asp para despues incluirlo en el .asp principal pero el problema persiste.
Subiría los ficheros pero no he podido :(

Etiquetas: independientes, javascript, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:24.