Home / Questions / 221527
Accepted
Caldeiro
Asked: 2020-12-13 05:07:29 +0800 CST 2020-12-13 05:07:29 +0800 CST

Effect of hide and show div

  • 772

Hi, I have this script in js that adds a class to these two classes to change the style when clicking on the div that has the letterBox class.

The question is I want to remove the alphabetical class, which is the one I put when they click on any other place than letterboxes.

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

When I click on this div, the alphabetical class is added to letterboxes, but when I try to removeClass, the addClass stops working.

javascript

2 Answers

  1. Best Answer

    not()You can use the ( info ) method to get those elements that are of one type and not of another. In this case you would select all the elements divsexcept those that have the class cajasLetrasand add the click event to remove the class to the elements with class cajasLetraswith removeClass()( removeClass info )

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

    edit

    I update with what the OP asks for. An easy option to remove the class when you click on anything other than the div cajasLetrasis to make the with div focusabletabindex="-1" and then use the event focusouton the div.

    A tabindex="-1" value removes the element from the default navigation flow (ie, 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.

    Here more info abouttabindex="-1"

    • 9

  2. I use this function to hide and show an element, in this case it is a counter. I use the events onblur()and onfocus()that the element offers <input>(also applies to a textarea, as it is in this case). Try it and adapt it to your project, it may be useful if you don't tell me, greetings!

    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>

    The theme is events onblur()and onfocus(), which work the way you propose. Clicking on any other side of the page removes a value from an element, in the example I gave you it hides and shows an element. In your case you would have to do the opposite so that the style you want to change changes when you click elsewhere on the site, respectively.

    • 0