javascript - jQuery点击事件只触发一次

Question

在我的页面中，我有两种不同的表单。我希望用户一次看到一个表单，并在用户单击链接时在表单之间切换。

为了实现这一目标，我在两个表单中都包含了一个链接并绑定(bind)了单击事件，以便在单击该事件时用户会看到除已可见内容之外的表单。

问题是我无法在 jQuery 中实现它。
这是我的 HTML:

<div class="col-md-6 loginPanel">
  <div class="panel panel-default myFormContainer">
    <div class="panel-heading myPanelHeadingContainer">
      <h3 class="panel-title">
        Login
        <span class="flipper">
          <a href="#">Flip</a>
        </span>
      </h3>
    </div>
    <div class="panel-body">
      <form>
        <div class="form-group">
          <label for="authCode">Authentication Code</label>
          <input type="password" class="form-control" id="authCode" placeholder="Auth Code">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

<div class="col-md-6 registerPanel">
  <div class="panel panel-default myFormContainer">
    <div class="panel-heading myPanelHeadingContainer">
      <h3 class="panel-title">
        Register
        <span class="flipper">
          <a href="#">Flip</a>
        </span>
      </h3>
    </div>
    <div class="panel-body">
      <form>
        <div class="form-group">
          <label for="newAuthCode">New Authentication Code</label>
          <input type="password" class="form-control" id="newAuthCode" placeholder="New Auth Code">
        </div>
        <div class="form-group">
          <label for="clientSecret">Client Secret</label>
          <input type="password" class="form-control" id="clientSecret" placeholder="Client Secret">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>

在上面的 HTML 代码中，我将链接包装在 span 中，并为其指定了 flipper 类。

这是我的 jQuery:

$(document).ready(function () {
  $('.registerPanel').first().hide();
  var flipper1 = $('.flipper').first();
  var flipper2 = $('.flipper').get(1);

  flipper1.click(function () {
    $('.loginPanel').first().hide();
    $('.registerPanel').first().show(400);
  });

  flipper2.click(function () {
    $('.registerPanel').first().hide();
    $('.loginPanel').first().show(400);
  });
});

在上面的代码中，我特意将 click 事件绑定(bind)到 span 元素，假设当单击其中的某些内容时，span 的 click 事件将会触发。

此外，flipper1 和 flipper2 两个变量保存对与两种不同表单相关的两个 span 元素的引用。

最初，当没有发生点击并且没有事件触发时，loginPanel 预计是可见的(这就是我隐藏 registerPanel 的原因)。
当我单击 Flip 链接时，它会隐藏 loginPanel 并按预期显示 registerPanel，但是当我单击 registerPanel 中的链接时，什么也没有发生(即我无法返回 loginPanel)。

有人可以告诉我出了什么问题吗？如果可能的话，请提出一个好的解决方案。谢谢!

Answer 1

.get() 方法返回与 jQuery 对象匹配的 DOM 元素，因此这可能是第二次单击未发生的原因。

因此，您可以在此处使用 eq 选择器，如下所示:

$('.registerPanel').first().hide();
var flipper1 = $('.flipper:eq(0)');
var flipper2 = $('.flipper:eq(1)');

flipper1.click(function() {
  $('.loginPanel').first().hide();
  $('.registerPanel').first().show(400);
});

flipper2.click(function() {
  $('.registerPanel').first().hide();
  $('.loginPanel').first().show(400);
});