alternar funciones en jquery

mayid · #1 (**permalink**) 21/12/2009, 11:37

Necesito que al primer click, el texto se ponga en h2, y que con otro click vuelva a ser parrafo (<p>). Ad-infinitum.

Quizas esto sea basico, pero no se como resolverlo. Quizas con toggle?

Cita:

function() {
this.heading(2);
}

mayid · #2 (**permalink**) 21/12/2009, 13:53

Se me ocurrio esto, pero no logro identificar el h2:

Cita:

if ($(this).parent() == "h2") {

alert("subtitulo");

};

Me devuelve object object

Dany_s · #3 (**permalink**) 21/12/2009, 16:17

podria ser

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="jquery.js" type="text/javascript"></script>
    </head>
    <script type="text/javascript">
    $().ready( function (){
        $("#cambiar").toggle(
            function () {
                $('#alterna').replaceWith("<h2 id='alterna'>" + $('#alterna').text() + "</h2>");
            },
            function () {
                $('#alterna').replaceWith("<p id='alterna'>" + $('#alterna').text() + "</p>");
            }
        );
    });

    </script>
    <style type="text/css">
    p{background:red}
    h2{background:blue}
    </style>
    <body>
        <div id="cambiar"><p id="alterna">el texto</p></div>
    </body>
</html>

o sino

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="jquery.js" type="text/javascript"></script>
    </head>
    <script type="text/javascript">
    $().ready( function (){
        $("#alterna").live('click',function (){
            if ( this.nodeName == 'P' )
                $(this).replaceWith("<h2 id='alterna'>" + $(this).text() + "</h2>");
            else
                $(this).replaceWith("<p id='alterna'>" + $(this).text() + "</p>");
        });
    });

    </script>
    <style type="text/css">
    p{background:red}
    h2{background:blue}
    </style>
    <body>
        <p id="alterna">el texto</p>
    </body>
</html>

Dany_s · #4 (**permalink**) 21/12/2009, 16:19

Cita:

Iniciado por mayid

Se me ocurrio esto, pero no logro identificar el h2:

Me devuelve object object

eso seria this.parentNode.nodeName == 'H2'

mayid · #5 (**permalink**) 21/12/2009, 16:40

Cita:

eso seria this.parentNode.nodeName == 'H2'

Buenisimo. No sabia que se pudiera obtener otra cosa que atributos de un tag. Esto que me pasaste funciona. No se adapta a mi problema porque estoy en un editor WYSIWYG, y no puede reconocer el parent de mi texto seleccionado. Pero funciona para otros casos asi que lo voy a tener presente.

Lo de toggle es buenisimo. Que lo hayas publicado ya me permite comenzar a utilizarlo. Yo sabia que podia utilizarse para algo mas que para desaparecer y aparecer cosas, pero no sabia como.

Dany_s · #6 (**permalink**) 22/12/2009, 06:17

ah bueno, no creo que servirá poner el código acá no? será bastante lioso?

con jquery puedes hacer también así
si tu estructura es esta

Código HTML:

<div><h2>asd</h2></div>

esto da verdadero
alert ( $('h2').parent().is('DIV') );

mayid · #7 (**permalink**) 22/12/2009, 08:05

Buenisimo todo.

POner codigo de un WYSIWYG no tiene sentido. Tienen una logica diferente al ressto de proyectos html, por esto del iframe y los html editables online. Lo que te puede decir es que si uno apreta el boton para titulos, todo lo seleccionado en azul se pone en titulo, o todo lo que este en el renglon si no hay seleccion. Pero sin html.

Ya pude resolver la inquietud con un metodo un tanto "arcaico". Pero era necesario hacerlo asi porque no tenia posibilidad de usar selectores html, ni la funcion toggle:

Cita:

h2: function() {

texto = this;
if (typeof n == "undefined") {n = 1; };
if (n % 2 != 1)
{
texto.heading(2);
}
else{
texto.formatBlock("<p>"); };
n++;
}