Question

有趣的问题，我不明白为什么它不起作用。

我的导航栏上有一个包含在span类

中的登录表单

<span class="loginform">
          <form class="navbar-form navbar-right" role="form">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success" id="signin">Sign in</button>
        <button type="submit" class="btn btn-info" id="signup">Sign Up</button>
      </form>

当有人点击登录按钮时我会使用此功能（现在它是原型，因此还没有服务器交互）

$('#signin').click(function(){
alert('submitted');
$('#loginform').html('<ul class="nav navbar-nav navbar-right"><li><a href="#post">Post Ad</a></li><li><a href="#mine">My Ads</a></li><li><a href="#profile">Ray Bayly</a></li></ul>');
});

我添加了警报只是为了确保它到达并正常工作，但由于某种原因，它并没有用新的菜单项替换登录表单。有什么不同我需要尝试，因为它的导航栏？

Answer 1

$('#loginform')

<span class="loginform">

＆＃39;登录表单＆＃39;是span的类，而不是id。所以你需要将选择器更改为

$('.loginform')

或者向span

添加loginform的ID

<span class="loginform" id="loginform">

Answer 2

试试这个

<button type="button" class="btn btn-success" id="signin">Sign in</button>

<button type="submit"始终发布表单，因此请使用type=button

选择器是类，因此请使用$('.loginform')

DEMO

Answer 3

要正确匹配元素，请使用类选择器：

$('.loginform')

而不是ID选择器：

$('#loginform')

Answer 4

正如其他人所说，你的选择器是错误的。但是，您还需要停止提交表单，因为这会导致页面刷新，您的更改将会丢失：

WORKING DEMO

$('#signin').click(function(e){ /* add "e" */

    e.preventDefault(); /* add this line */

    alert('submitted');
    $('.loginform').html('<ul class="nav navbar-nav navbar-right"><li><a href="#post">Post Ad</a></li><li><a href="#mine">My Ads</a></li><li><a href="#profile">Ray Bayly</a></li></ul>');
});

如果您希望在页面中保持这种状态，您应该对用户登录状态进行一些服务器端验证，并在页面加载时提供正确的HTML而不是使用javascript。

Bootstrap，根据登录表单动态更改导航

4 个答案: