jQuery toggle（）添加和删除类

Question

I have created a simple jQuery toggle function which adds and removes the class formVisable the toggle function is adding the class how in the wrong place CLICK HERE .

I want to add the class to the following element <div id="hide-overlay"> however at the moment the class is being added to my button element <a id="show-form"> . Below is a snippet of my code

HTML

<div class="row promo-image responsive">
        <figure>
            <figcaption class="caption">
                <a id="show-form" class="promo-button" href="#">
                    <span>Be More Productive</span>
                    <i class="fa fa-download"></i>  
                </a>
                <h4>Download the 8 steps for successful collabration</h4>
            </figcaption>
        </figure>
    </div>

HIDDEN ELEMENT

<div id="hide-overlay">
    <a id="hide-form-close" href=""><i class="fa fa-times fa-2x"></i></a>

    <div class="col-sm-6 col-sm-offset-3 form-container">
        <h2 class="business">Register</h2>
       <form class="main-contact submit-fade ajax-form" action="process.php" method="POST">
            <ul class="small-block-grid-2 medium-block-grid-2 hide-form">
               <li>
                  <label for="name">Name</label>
                  <input type="text" class="form-control" name="name" placeholder="Name" required>
                </li>

                <li>
                  <label for="email">Email</label>
                  <input type="text" class="form-control" name="email" placeholder="Email">
                 </li>
              </ul>
              <input type="submit" class="btn btn-success">
        </form>
    </div>
  </div>

JQUERY

var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").on("click", function(e){
   $(this).toggleClass("formVisable");
});

Answer 1

It's because you are using this which represents the object that is calling the function, in this case #show-form . You should use $('#hide-overlay').toggleClass("formVisible");

Here's the fiddle for it: http://jsfiddle.net/norg5k2o/4/

Answer 2

"This" represents the object that an action is being applied to. In this case, it's your button. You want the class to be applied to your overlay, rather than to the button. Therefore, try this:

Also, you had some spelling errors.

$("#hide-overlay").hide()
$("#show-form").on("click", function(e){
  $("#hide-overlay").toggleClass("formVisible");
});

WORKING DEMO HERE

Answer 3

The $(this) inside a JQuery event handler is the DOM element that has the handler attached. If we attached the handler to something else, like the containing <div> , we will get the DIV DOM element doesn't matter which inside elements of the DIV we clicked.

So, in this case you would need something like this, since $("#hideOverlay") is already cached, the correct way to do it is:

var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").click(function(e){
    $hideOverlay.toggleClass("formVisible");
    //Prevent default behavior for links and buttons
    e.preventDefault();
});

Answer 4

You did not properlay declare the variable. You had $(#hideOverlay) when your HTML id attribute was actually id='hide-overlay' . As such, I have re-written the jQuery to properly target and hide the form as was your original intent. I also, disabled the link so that it will only do the show/hide function and not the go to href='#' action.

As the other answers suggest, when using the $(this) selector in jQuery, it will target the parent selector of the current iteration of the function.

I also updated your CSS as it was hiding the form.

View working example

var $hideOverlay = $("div#hide-overlay");
$hideOverlay.toggle();
$hideOverlay.css("border", "solid 1px black");
  $("a#show-form").on("click", function(e){
    e.preventDefault();
    $hideOverlay.slideToggle(300);
  });