Jquery - use "focusIn" as trigger to add a class

Asked

Viewed 67 times

0

Opa Galera! all right? I am making a form that should be divided into two or more steps... I had the idea of using a class ". ", in the second "div" and leave it as "display: None;" in css. then I put another class with "display: block;" my idea, was to put a trigger in the last field of the first div, so when the person was in this field, he would make visible the second div. 

$('#trigger').focusin(function(){
    $('.hide').addClass('isActive');

})
form{
    border: 1px solid black;
    border-radius: 5px 5px;
    padding: 80px;
}

div{
    padding: 30px;
}

.hide{
    display: none;
}

.isActive{
    display: block;
}
<form>

            <div class="first">
                Nome completo:<input type="text">
                dados:<input type="text">
                dados:<input type="text"/>
                dados:<input id="trigger" type="text"/>
                
            </div>

            <div class="hide">
                dados:<input type="text"/>
                dados:<input type="text"/>
                dados:<input type="text"/>
                dados:<input type="text"/>
            </div>
                
</form>

I used addClass, unsuccessfully. I tried to use removeClass before adding and it didn’t work either. Would I have to rethink the way to do this?

javascript jquery

  • i tried that too:$('#Trigger'). focusin(Function(){ $('div'). removeClass('. Hide'). addClass('isActive'); });

  • 1

    but you are picking up an element with the class "Hide" that is with display: none; and adding another class with display: block;? have you ever thought that this is going to conflict?

  • Gee man, Big Brother! but then I did the following... I took the "display" from the "isActive" class and changed the jquery to : "$('#Trigger'). focusin(Function(){ $(div).removeClass('Hide') })" did not run either, I’m pretty sure I’m doing it in a dumb way...

  • 1

    i put an example with a suggestion below. You could also simply change the display only without changing the class, has several possible solutions :)

  • is then, I realized I didn’t even need the class "isActive", just delete the ". Hide" already resolves... vc says change the "display" using the ". css()"?

1 answer

1


Selects the div by another criterion, an ID for example, and removes one class adds it to another, avoiding conflict, because if you remove the "Hide" class, how does it work if your event is in the focusin of the class "Hide"?

In the example below, I used an ID in the div, to not impact the class that will be removed/added.

$('#trigger').focusin(function(){
  $('#divHide').removeClass('hide');
  $('#divHide').addClass('isActive');
})

$('#trigger').focusout(function(){
  $('#divHide').removeClass('isActive');
  $('#divHide').addClass('hide');
})
form{
    border: 1px solid black;
    border-radius: 5px 5px;
    padding: 80px;
}

div{
    padding: 30px;
}

.hide{
    display: none;
}

.isActive{
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="first">
    Nome completo:<input type="text">
    dados:<input type="text">
    dados:<input type="text"/>
    dados:<input id="trigger" type="text"/>

  </div>

  <div id="divHide" class="hide">
    dados:<input type="text"/>
    dados:<input type="text"/>
    dados:<input type="text"/>
    dados:<input type="text"/>
  </div>
</form>

  • Fuck!!! I was calling him by the class that I was going to exclude, it was "garoteando"

  • Thank you so much for your help Ricardo!!! I will continue my studies!

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.