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>

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

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

以下是它的小提琴：http://jsfiddle.net/norg5k2o/4/

Answer 2

“This”表示正在应用操作的对象。在这种情况下，它是你的按钮。您希望将类应用于叠加层，而不是按钮。因此，试试这个：

另外，你有一些拼写错误。

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

WORKING DEMO HERE

Answer 3

JQuery事件处理程序中的boost::apply_visitor是附加了处理程序的DOM元素。如果我们将处理程序附加到其他内容（例如包含$(this)），我们将得到DIV DOM元素与我们单击的DIV内部元素无关。

所以，在这种情况下你需要这样的东西，因为<div>已经被缓存了，正确的方法是：

$("#hideOverlay")

Answer 4

您没有正确声明变量。当您的HTML ID属性实际为$(#hideOverlay)时，您已id='hide-overlay'。因此，我重新编写了jQuery来正确定位和隐藏表单，就像你原来的意图一样。我也禁用了链接，这样它只会执行show / hide功能而不是去href ='＃'动作。

正如其他答案所暗示的，当在jQuery中使用$（this）选择器时，它将定位函数当前迭代的父选择器。

我还更新了CSS，因为它隐藏了表单。

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);
  });

jquery toggle（）添加和删除一个类

4 个答案: