javascript - jquery toggle() 添加和删除类

Question

我创建了一个简单的 jQuery 切换函数，用于添加和删除类 formVisable切换功能正在错误的位置添加类 CLICK HERE 。

我想将类添加到以下元素 <div id="hide-overlay">然而目前该类已添加到我的按钮元素 <a id="show-form"> 。下面是我的代码片段

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>

隐藏元素

<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

这是因为您使用的 this 代表调用该函数的对象，在本例中为 #show-form。您应该使用 $('#hide-overlay').toggleClass("formVisible");

这是它的 fiddle :http://jsfiddle.net/norg5k2o/4/