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

red_robe · #1 (**permalink**) 30/01/2013, 20:11

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

emprear · #2 (**permalink**) 30/01/2013, 21:06

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
 
    $('button').click( function (){
        var marca = $('#marca01b').text();
         $('button').text(marca); // modifica todos los botones
     //  $(this).text(marca); // solo el boton clickeado, comentar anterior y descomentar este
       
        
    });
 
});
//]]>
</script>
</head>
<body>
    <button>cambiar este texto</button>
    <button>cambiar este texto</button>
    <button>cambiar este texto</button>
    <span id="marca01b">texto en marca01b</span>
</body>
</html>

Saludos

red_robe · #3 (**permalink**) 31/01/2013, 19:30

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 :(