Question

我想使用jquery将元素添加到元素。我使用了推荐的语法，但jquery仍然无法正常工作。我想做的是，当用户单击注册时，他将看到注册表单，否则将登录。另外，我已经将注册表单设置为使用CSS隐藏。现在，我试图将.active添加到元素中，但是我被卡住了。我的html看起来像

jQuery(document).ready(function() {
  $(".signup_form").click(function() {
    $(this).addClass('active');
  });
});

.signup_form {
  visibility: hidden;
}

.active {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form_inner">
  <ul class="user_form_nav">
    <li class="login_form" name="login">
      <a href="#loginform">Login</a>
    </li>
    <li class="signup_form" id="signup" name="signup">
      <a href="#signupform">SignUp</a>
    </li>
  </ul>
   </div>

任何建议。

Answer 1

您可以切换登录表单并使用.show()和.hide()来注册表单；

我添加了一个代码段，希望这是您要实现的目标。干杯..：D

jQuery(document).ready(function() {
  $(".signup_form").click(function(e) {
    e.preventDefault();
    $('#sign-up-form').show();
    $('#login-form').hide()
  });
  $('#login').on('click', function(e){
    e.preventDefault();
    $('#sign-up-form').hide();
    $('#login-form').show()
  })
});

.active {
  display: block;
}
.sign-up{
  display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form_inner">
  <ul class="user_form_nav">
    <li class="login_form" id="login" name="login">
      <a href="#loginform">Login</a>
    </li>
    <li class="signup_form" id="signup" name="signup">
      <a href="#signupform">SignUp</a>
    </li>
  </ul>
  
  <div id="login-form">
    <h2>Login Form</h2>
  </div>
  <div class="sign-up" id="sign-up-form">
    <h2> Sign Up Form</h2>
  </div>

Answer 2

jQuery(document).ready(function(e) {
$signUpAnchor = $(".user_form_signup")
$signUpAnchor.click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    $signUpAnchor.addClass('active');
    });
});

尝试一下，函数中的$ this调用很可能指向事件的范围。所以不要锚定。

锚点具有默认的点击行为，因此我们需要防止这种情况。

Answer 3

您不能单击带有visibility:hidden的元素，而尝试使用opacity：

jQuery(document).ready(function() {
$(".signup_form").click(function() {
    $(this).addClass('active');
    });
});

.signup_form {
    opacity:0;
}

.active {
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="user_form_nav">
    <li class="login_form" name="login" >
      <a href="#loginform">Login</a>  
    </li>
    <li class="signup_form"  id="signup" name="signup" >
        <a href="#signupform">SignUp</a>
    </li>
</ul>

Answer 4

为什么不使用visibility而不是使用display？如果这样做，它应该可以正常工作。

.user_form_signup {
     display: none;
}
.active {
     display: block;
}

Answer 5

选项1：相反，如果addClass尝试使用ToggleClass。

选项2：代替可见性，尝试使用width和height，将其都设置为0。将具有width和height的活动类设置为auto或根据自己的喜好

选项3：将addClass替换为ToggleClass，而不是将可见性集显示为无，以进行注册和阻止活动

jQuery addclass在任何浏览器中均不起作用

5 个答案: