Ayuda novato con Jquery

Dundee · #1 (**permalink**) 06/05/2010, 10:04

Hola gente , lo que quiero hacer seguro es muy sencillo, pero yo apenas estoy comenznado con Jquery.
El tema es que este código no me funciona y no se que hago mal

Código:

$(document).ready(function(){
$('#siguiente').toggle(function() {
	
	$("#texto1").removeClass("muestra");
	$("#texto1").addClass("oculta");
	$("#texto2").addClass("muestra");

}, function() {
	
	$("#texto2").removeClass("muestra");
	$("#texto2").addClass("oculta");
	$("#texto1").addClass("muestra");
});
})

Tendo dos capas
<div id="texto1"> e <div id="texto2"> respectivamente
y lo que necesito es que al pinchar en la capa <div id="siguiente"> se visualice primero una capa (con un texto) y al siguiente clik la otra capa (con otro texto).

No se si es que a toggle no le puedo pasar más de una instrucción o que sucede , porque si solo le pongo una instrucción funciona, mal pero funciona, digo mal porque al no eliminar la clase muestra , me muestra ambos textos y no es lo que quiero.

Un saludo y mil gracias de antemano.

Infernal · #2 (**permalink**) 06/05/2010, 11:38

igual y pruebalo por separado, me parece (no estoy seguro) que por los saltos de linea es incorrecto.

Código HTML:

$(document).ready(function(){

function f1(){
	$("#texto1").removeClass("muestra");
	$("#texto1").addClass("oculta");
	$("#texto2").addClass("muestra");
}
function f2(){
	$("#texto2").removeClass("muestra");
	$("#texto2").addClass("oculta");
	$("#texto1").addClass("muestra");
}

$('#siguiente').toggle(f1, f2);

});

Dundee · #3 (**permalink**) 06/05/2010, 12:05

Cita:

Iniciado por Infernal

igual y pruebalo por separado, me parece (no estoy seguro) que por los saltos de linea es incorrecto.

Código HTML:

$(document).ready(function(){
function f1(){
	$("#texto1").removeClass("muestra");
	$("#texto1").addClass("oculta");
	$("#texto2").addClass("muestra");
}
function f2(){
	$("#texto2").removeClass("muestra");
	$("#texto2").addClass("oculta");
	$("#texto1").addClass("muestra");
}

$('#siguiente').toggle(f1, f2);

});

Que va así tampoco funciona, gracias de todos modos compañero (::

Seguro que es un error de sintaxis , siempre me ha dado más guerra el js que el PHP ejejeje, y ahora tocará pelearse con el Jquery , aunque reconozco que todo lo que se puede hacer con este FW es impresionante , por eso mi empeño en aprenderlo.
Mil gracias

Dany_s · #4 (**permalink**) 06/05/2010, 13:57

podés hacer

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $('#siguiente').click( function (){
            $("#texto1, #texto2").toggleClass('oculta');
        });
    });
</script>
  <style>
      .oculta{display:none}
  </style>
</head>
<body>
    <div id="texto1">texto uno</div><div id="texto2" class="oculta">texto dos</div>
    <a href="#" id="siguiente">click</a>
</body>
</html>

o sino

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $('#siguiente').click( function (){
            $("#texto1, #texto2").toggle();
        });
    });
</script>
  <style>
      .oculta{display:none}
  </style>
</head>
<body>
    <div id="texto1">texto uno</div><div id="texto2" class="oculta">texto dos</div>
    <a href="#" id="siguiente">click</a>
</body>
</html>

con lo tuyo en el segundo click te falta eliminar la clase oculta de #texto1, lo mismo para el otro click eliminar .oculta de #texto2, siempre van a tener la clase oculta y muestra a partir del 2do. click

Código Javascript:

Ver original$('#siguiente').toggle(function() {
    $("#texto1").removeClass("muestra");
        $("#texto2").removeClass("oculta");
    $("#texto1").addClass("oculta");
    $("#texto2").addClass("muestra");
}, function() {
    $("#texto2").removeClass("muestra");
        $("#texto1").removeClass("oculta");
    $("#texto2").addClass("oculta");
    $("#texto1").addClass("muestra");
});

como lo tenés ahora fijate esto:
si en el css declarás
.oculta{display:none}
.muestra{display:block}
va a funcionar

pero si declarás
primero la clase .muestra no

ah y usá el encadenamiento

Código Javascript:

Ver original$('#siguiente').toggle(function() {
    $("#texto1").addClass("oculta").removeClass("muestra");
    $("#texto2").addClass("muestra").removeClass("oculta");
}, function() {
    $("#texto2").addClass("oculta").removeClass("muestra");
    $("#texto1").addClass("muestra").removeClass("oculta");
});

en vez de
$("#texto1").removeClass("muestra");
$("#texto1").addClass("oculta");

hacés
$("#texto1").addClass("oculta").removeClass("muest ra");

pero para eso mejor usa toggle jeje todo en una sola linea y cortito como en el segundo ejemplo

Dundee · #5 (**permalink**) 06/05/2010, 15:15

Cita:

Iniciado por Dany_s

como lo tenés ahora fijate esto:
si en el css declarás
.oculta{display:none}
.muestra{display:block}
va a funcionar

pero si declarás
primero la clase .muestra no

Gracias compañero , lo has explicado muy bien, lo único que no entiendo es eso que he citado, ¿que mas da que declare en la hoja de estilos primero .muestra y luego .oculta?.

Gracias por la ayuda

Dany_s · #6 (**permalink**) 06/05/2010, 15:34

toma el último que es block, no tiene nada que ver con jquery