3

Buenas tengo este script en js que añade una clase a esas dos clases para cambiar el estilo cuando se hace click en el div que tiene la clase cajasLetras.

La pregunta es quiero remover la clase alphabetical que es la que pongo cuando hacen click en cualquier otro sitio que no sea cajasLetras.

<script type="text/javascript">
(function($){
$(document).ready(function(){
    $(".cajasLetras").click(function () {
        $('.cajasLetras').addClass('alphabetical');
        $('.Linearicons-Free-text-format').addClass('alphabetical');

    });
});
})(jQuery)

</script>


<div class="cajasLetras">
    <div class="dropdown-menu-letras">
        <span class="topbar-text">
           <i class="Linearicons-Free-text-format"></i>&nbsp;ALPHABETICAL
        </span>
    </div>  
</div>

Yo al clickar sobre este div se le añade la clase alphabetical a cajasLetras pero, al intentar un removeClass el addClass deja de funcionar

3
  • 1
    Agrega tu HTML para poder orientarnos mejor :) Commented el 12 dic. 2018 a las 13:09
  • 1
    $('.alphabetical').removeClass('alphabetical');
    – Roy Bogado
    Commented el 12 dic. 2018 a las 13:24
  • 1
    ¿Cuántos elementos con clase cajasLetras tienes? Si hay varios en la página, quizás te interesaría utilizar mejor this dentro del manejador del click.
    – Alvaro Montoro
    Commented el 12 dic. 2018 a las 14:36

2 respuestas 2

9

Puedes utilizar el método not() (info) para obtener aquellos elementos que sean de un tipo y no de otro. En este caso seleccionarías todos los divs menos los que tienen la clase cajasLetras y les añadirías el evento click para quitar la clase a los elementos con clase cajasLetras con removeClass() (info de removeClass)

(function($){
$(document).ready(function(){
    $(".cajasLetras").click(function () {
        $('.cajasLetras').addClass('alphabetical');
        $('.Linearicons-Free-text-format').addClass('alphabetical');
    });
    $(".cajasLetras").focusout(function(){
      $('.cajasLetras').removeClass('alphabetical');
    });
});
})(jQuery)
.alphabetical{
  background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cajasLetras" tabindex="-1">Div cajasletras</div>
<div class="otraClase">Div distinto de cajasletras</div>

Edito

Actualizo con lo que pide el OP. Una opción sencilla para quitar la clase cuando pulsas en cualquier elemento distinto del div cajasLetras es hacer el div focusable con tabindex="-1" y luego utilizar el evento focusout en el div.

A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting.** This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them.

Aquí más info sobre tabindex="-1"

8
  • Buenas gracias por tu ayuda. Dos preguntas puedo utilizat el .not con un ("*") para que sea cualquiera? Y segundo al aplicar el estilo removeClass, ya no me hace el addClass. Creo que porque el div tiene varios elementos dentro.. No lo se en todo caso ahora pondre el HTML para que lo veais mas claro
    – Caldeiro
    Commented el 13 dic. 2018 a las 8:38
  • .not("*") no sería un selector válido. De todas formas, no termino de entender qué es lo que quieres hacer con eso.
    – Kiko_L
    Commented el 13 dic. 2018 a las 8:51
  • Tengo un div (.cajasLetras) con diferentes elementos dentro, he creado una funcion que al hacer click en ese div,cambia su estlo y lo deja con ese estilo. Lo que pretendo ahora es que cuando hagas click en otra parte de la pagina que no sea en .cajasLetras (en cualquier otro sitio) a .cajasLetras se le quite esa clase para que se le vaya el estilo. Cual es el problema que me estoy encontrando, tu ejemplo es bueno y es eso lo que quiero hacer. Pero dentro de cajasletras hay otros elementos, al hacer click si me pone la clase correctamente. al tene removeClass ya no me hace el addClass
    – Caldeiro
    Commented el 13 dic. 2018 a las 8:56
  • Ya perdonarás pero sigo sin entenderlo bien. Cuando haces click en esos elementos dentro del div cajasLetras, ¿qué quieres hacer? Te en cuenta que siguen estando dentro de tu div...
    – Kiko_L
    Commented el 13 dic. 2018 a las 9:42
  • He puesto el HTML arriba. Vale intentare explicarlo de forma mas sencilla, yo hago click en cajasLetras y se añade la clase alphabetical con "x" estilo. Si hago el removeClass que tu me has puesto el addClass ya no lo hace. Lo que quiero cuando hago click en cajasLetras que añada alphabetical, cuando hago click en cualquier otro sitio que saque la clase alphabetical.
    – Caldeiro
    Commented el 13 dic. 2018 a las 9:45
0

Yo utilizo esta función para ocultar y mostrar un elemento, en este caso es un contador. Utilizo los eventos onblur() y onfocus() que ofrece el elemento <input>(Aplica también para un textarea, como es en este caso). Pruébalo y adaptalo a tu proyecto, puede que te sirva sino me comentas, saludos!

function ocultarContador(){
	  				
	  	document.getElementById('ocultar').style.display = "none";
}

function mostrarContador(){

	    document.getElementById('ocultar').style.display = "inline-block";
}
/*No tomes mucho en cuenta este css*/
.ocultar{
  display: none;
  
}

.ocultar input{
 border-style: solid;
 border-color: black;
 border-width: 2px;
 border-radius: 5px;
 width: 12%;
 height: 5mm;
 color: black;
 padding-left: 1mm;
}
.form-group{
  font-family: 'Segoe UI' !important;
}
<div class="form-group">
	<label class="label_contact">¿En qué podemos ayudarte?</label>
	<br><br>
	<textarea name="comment" id="com" required="required" onfocus="mostrarContador(this)" onblur="ocultarContador(this)" title="Completa este campo"></textarea>
									
	<div id="ocultar" class="ocultar">
	  &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</label>
    <input disabled="disabled" maxlength="4" value="1500" id="contador">
	 </div>
</div>	

El tema son los eventos onblur() y onfocus(), que trabajan de la manera como lo planteas. Al hacer clic en cualquier otro lado de la pagina quita un valor a un elemento, en el ejemplo que te plantee oculta y muestra un elemento. En tu caso tendrías que hacer lo contrario para que cambie el estilo que quieras modificar cuando haces clic en otro lado del sitio, respectivamente.

3
  • No es ningún textarea es un div que al hacer click se le aplica un estilo, y lo que quiero es que al hacer click en cualquier otro sitio que no sea ese div, el estilo de este que le aplico con la clase alphabeical se vaya.
    – Caldeiro
    Commented el 13 dic. 2018 a las 8:23
  • Entonces si pruebas añadiendo una condición dentro de tu codigo, y luego remueves la clase, de manera similar a esto: if ($('id_tu_div').onfocus()) {$('.tu_clase').addClass("la_nueva_clase");} else if($('id_tu_div').onblur()){$(".tu_clase").removeClass("la_nueva_clasel");}. Le aviso que no he probado aquel código, es más, es solo una idea para orientarlo a usted.
    – M4uriXD
    Commented el 13 dic. 2018 a las 17:23
  • Si no pones el tabindex="-1" en el div ese código no funciona porque el div no es un elemento en el que por defecto se pueda hacer foco.
    – Kiko_L
    Commented el 14 dic. 2018 a las 8:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.