Buscar elemento con $(this)

[Ventru3]

Hola, estoy haciendo empezando con Javascript utilizando el framework de jQuery así que mis conocimientos son bastante bajos.

He creado una pagina que me previsualiza el texto y me cambia el color del texto sleccionandolo en un input (tipo radio). Hasta hay todo perfecto, ahora quiero que cuando haga click en un input, el input seleccionado anterior pierda su estilo (esta parte también me va) y lo coja el input al cual he hecho click.

El codigo de esa parte lo tengo asi:

Código Javascript:

$('#colors input').click(
    function(){
        $('span').removeClass('selected');
        $(this).has('span').addClass('selected');
});
 

El $(this) me devuelve el input en el que he hecho click, pero no consigo que me añada el estilo al otro span porque no se que sintaxis utilizar para ello.

[ZiTAL]

Código Javascript:

$(this).find('span').addClass('selected');
 

[Ventru3]

Gracias por la respuesta, pero también probé con el find, pero el resultado es el mismo. Quita el estilo, pero no lo añade.

Dejo la estructura del HTML de esa parte en concreto a ver si eso ayuda a concretar mas.

Código HTML:

<section id="colors">
    <input id="black" type="radio" name="color" />
        <label for="black"><span class="black selected">&nbsp;</span></label>
    <input id="orange" type="radio" name="color" />
        <label for="orange"><span class="orange">&nbsp;</span></label>
    <input id="blue" type="radio" name="color" />
        <label for="blue"><span class="blue">&nbsp;</span></label>
    <input id="white" type="radio" name="color" />
        <label for="white"><span class="white">&nbsp;</span></label>
</section>
 

Al hacer click en un input (realmente el click es al label que contiene un span con el color porque los inputs estan ocultos) me devuelve el valor del input. Por ejemplo en el caso de hacer click en el span naranja, $(this) me devuelve <input id="orange" type="radio" name="color" />.

[ZiTAL]

es que el span no esta dentro del input, por lo tanto no te va a encontrar nada:

Código Javascript:

$(this).next().next().addClass('selected');
 

[ZiTAL]

a ver si se puede así:

Código Javascript:

$(this).next('span').addClass('selected');
 

[Ventru3]

Pues la sintaxis la veo correcta, debería de funcionar perfectamente pues le dices que el siguiente elemento span de ese input le añada la clase selected, el caso es que no lo hace.

Me aproximo con esto

Código Javascript:

$(this, 'span').parent().addClass('selected');
 

El problema es que me añade la clase a todos, a ver si puedo especificar mas con parent().

[ZiTAL]

pues no lo es, mira:

Código HTML:

<input id="black" type="radio" name="color" /> <!-- CIERRA -->
        <label for="black"><span class="black selected">&nbsp;</span></label>
 

por lo tanto NO ESTA DENTRO DEL INPUT, por lo tanto no puede encontrar nada dentro:

prueba con esto:

Código Javascript:

$(this).next().find('span').addClass('selected');
 

[Shirak2]

No te sería más sencillo hacer algo tipo:

Código Javascript:

$('#colors input').click(function() {
    var color = $(this).attr('id'); // orange
 
    $('#colors').find('span.' + color).addClass('selected');
});
 

[Ventru3]

Si, ahora si.

Con solo $(this).next() me devolvía la etiqueta label con el span dentro, con dos next() me devolvía el siguiente input.

Ahora si me devuelve el valor del siguiente span.

Gracias por la ayuda, esto me a servido para aprender a buscar en los $(this).

En respuesta al código que me has puesto Shirak, son mas caracteres para hacer casi la misma función (falta añadir que elimine la clase del span/color seleccionado anteriormente). Pero me sirve para ver como recojes el valor de la id y los pasas como clase al span dinámica mente por color.

[Ventru3]

Dejo el script completo y comentado, por si le es de ayuda a alguien.

Código Javascript:

$(document).ready(function(){
    //Previsualizar texto, caracteres restantes y cambio de color
    $('#name').keyup(
        function(){
            var name = $(this).val(); //Valor del input
            var count = name.length; //Numero de caracteres escritos
            var max = parseInt($(this).attr('maxlength')); //Valor maximo del input
            var countdown = max - count; //Resta eñ valor maximo del input al numero de caracteres escritos
                        
            if (countdown > 6){ //Si quedan más de seis caracteres cambia de color
                $('#missing').css({color:'#2e2e2e'});
            }
                        
            if (countdown < 7){ //Si quedan menos de siete caracteres cambia de color
                $('#missing').css({color:'#f4fa58'});
            }
                        
            if (countdown < 4){ //Si quedan menos de cuatro caracteres cambia de color
                $('#missing').css({color:'#fe2e2e'});
            }
                                        
            $('#result').html(name); //Muestra el valor del input en #result
            $('#count').html(countdown); //Muestra los caracteres restantes
            });
        //Cambiar color del texto previsualizado
        $('#black').click(
            function(){
                $('#result').css({color:'#000000'});
            });
        $('#orange').click( 
            function(){
                $('#result').css({color:'#f68e56'});
            });
        $('#blue').click(
            function(){
                $('#result').css({color:'#6dcff6'});
            });
            $('#white').click(
                function(){
                    $('#result').css({color:'#ffffff'});
                });
        //Color seleccionado
        $('#colors input').click(
            function(){
                $('span').removeClass('selected'); //Quita la clase selected a todos los span
                $(this).next().find('span').addClass('selected'); //Agrega la clase selected al color seleccionado
            });
});
 

Si alguien ve que se puede simplificar el script, agradecería que lo dijera.