How to remove the styles when the if conditional is false

Question

How to remove the styles when the if conditional is false

Navigation

#1 by (2 votes)

2

And now how can I do the reverse functions?, by clicking I want that when the div cont-fieldBusq-relat is display: block; I want you to remove the styles that were assigned when we clicked on it, the function that I would like it to be is to give opacity first and then give it a display: none; to cont-campoBusq-relat

$(document).ready(function () {
        $('.buscarHMn').click(function () {
            if ($('#cont-campoBusq-relat') != "block") {
               $('#cont-campoBusq-relat').css({display:"block",});
      			setTimeout(function(){
					 $('#cont-campoBusq').animate({"opacity":"100"});
			}, 1000); 
            } else {
    			alert("ELSE");
    		}
        });
    });

.buscarHMn{
  width:100px;
  height: 100px;
  background:gray;
  color: white;
}
#cont-campoBusq-relat{
  display: none;
  width:100px;
  height: 100px;
  background:brown;
  color: white;
  
}
#cont-campoBusq{
  display: ;
  width:70px;
  height: 80px;
  background:orange;
  color: white;
  opacity:0;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="buscarHMn">Click</div>
<div id="cont-campoBusq-relat">
    <div id="cont-campoBusq"</div>
</div>

jquery

asked by Gamez 02.04.2017 в 15:19

source

1 answer

Problems creating or updating records from array Message history with PHP, MYSQL and AJAX

score 2 · Accepted Answer

For others, working with your code is a little complicated, for this reason I leave an example (commented and simple) functional and works with the same logic to your problem.

la clave de solucion para este tipo de problemas es:

1- crear una clase extra desde css

2- en base al valor de una variable que se active y desactive esa clase del inciso(1) con los eventos addClass y removeClass

    $(document).ready(function () {
    var num=0;//variable auxiliar 
            $('.buscarHMn').click(function () {
              if(num==0){// atraves de su valor realizamos las modificaciones
                $(this).removeClass('buscarHMn');
                $(this).addClass('nuevaClase');
                num=1;
              }else{
                $(this).removeClass('nuevaClase');
                $(this).addClass('buscarHMn');
                num=0;
              }    
            });
        });

    .nuevaClase{
      width:100px;
      height: 100px;
      background:gray;
      color: white;
    }
    .buscarHMn{
      width:100px;
      height: 100px;
      background:red;
      color: black;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="buscarHMn">Click</div>
    <div id="cont-campoBusq-relat">
        <div id="cont-campoBusq"</div>
    </div>

now solving or at least trying to solve:

condition if ($('#cont-campoBusq-relat') != "block") { is wrong should be

if ($('#cont-campoBusq-relat').css('display') != 'block') {

 $(document).ready(function () {
            $('.buscarHMn').click(function () {
                if ($('#cont-campoBusq-relat').css('display') != 'block') {// actualmente es display:none, asi que cumple y entrara al cuerpo del if
                   $('#cont-campoBusq-relat').css({display:"block"});
                   setTimeout(function(){
					 $('#cont-campoBusq').animate({"opacity":"100"});
			}, 1000); 
                } else {
            $('#cont-campoBusq').animate({"opacity":"0"});//para que desaparesca 
            setTimeout(function(){
				 $('#cont-campoBusq-relat').css({display:"none",});//aplicamos none para que pueda ingresar al 'if'
		}, 1000); 
    			
    		}
            });
        });

    .buscarHMn{
      width:100px;
      height: 100px;
      background:gray;
      color: white;
    }
    #cont-campoBusq-relat{
      display: none;
      width:100px;
      height: 100px;
      background:brown;
      color: white;
      
    }
    #cont-campoBusq{
      display: ;
      width:70px;
      height: 80px;
      background:orange;
      color: white;
      opacity:0;
      
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="buscarHMn">Click</div>
    <div id="cont-campoBusq-relat">
        <div id="cont-campoBusq"</div>
    </div>