Question

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

为了达到这个目的，我在两个表单中都包含了一个链接，并将click事件绑定在一起，这样当点击它时，用户就会看到除了已经可见的表单之外的其他表单。

问题是我无法在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事件绑定到span元素，假设当点击其中的某些内容时，span的点击事件将会触发。

另外，flipper1和flipper2两个是两个变量，它们引用了与两种不同形式相关的两个span元素。

最初，当没有点击发生且没有事件触发时，loginPanel预计会显示（这就是我隐藏registerPanel）的原因。当我点击翻转链接时，它会隐藏loginPanel并按预期显示registerPanel但是当我点击registerPanel中的链接时，没有任何反应（即我无法返回{{ 1}}）。

有人能说出什么是错的，如果可能的话，请提出一个好的解决方案。谢谢！

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

Answer 2

var flipper1 = $('.flipper').first();
var flipper2 = $('.flipper').last();

问题在于.get(1)，事件没有被添加到它，因为.get()返回DOM元素，但.first()和.last()返回jQuery对象。 / p>

jQuery点击事件仅在

2 个答案: