0

我对此很陌生，我需要帮助在单击使用 javascript/jquery 提交后将链接“登录”替换为登录。

这是我的索引页上的内容。目前我有一个弹出登录页面，我需要点击提交后停止该功能，然后将登录替换为登录。这是一个简单的演示站点，只需要简单的代码。谢谢！

  <Head>
  <script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
  $('.popbox').popbox();
});


<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>


<div class='collapse'>
  <div class='box'>
    <div class='arrow'></div>
    <div class='arrow-border'></div>
    <form name="myform" action="#" method="post" id="subForm">
     <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js"></script>
  <script>
     FB.init({ 
        appId:'193731474136796', cookie:true, 
        status:true, xfbml:true 
     });
  </script>
  <a href="#" onclick="fblogin();return false;"><img src="facebookbutton.png"></a>
    <script>
      //your fb login function
      function fblogin() {
        FB.login(function(response) {
          //...
        }, {scope:'read_stream,publish_stream,offline_access'});
      }
    </script>

  <div class="line-separator"></div>

      <div class="input">
        <input type="username" name="cm-name" id="name" placeholder="Username" />
      </div>
      <div class="input">
        <input type="password" name="cm-password" id="password" placeholder="Password" />
      </div>
      <input type="submit" value="login" id="submit" /> <a href="#" class="close">Forgot Username or Password?</a>

    </form>

我有一个用于弹出窗口的链接 javascript 页面。

 (function(){

  $.fn.popbox = function(options){
var settings = $.extend({
  selector      : this.selector,
  open          : '.open',
  box           : '.box',
  arrow         : '.arrow',
  arrow_border  : '.arrow-border',
  close         : '.close'
}, options);

var methods = {
  open: function(event){
    event.preventDefault();

    var pop = $(this);
    var box = $(this).parent().find(settings['box']);

    box.find(settings['arrow']).css({'left': box.width()/2 - 10});
    box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});

    if(box.css('display') == 'block'){
      methods.close();
    } else {
      box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
    }
  },

  close: function(){
    $(settings['box']).fadeOut("fast");
  }
};

$(document).bind('keyup', function(event){
  if(event.keyCode == 27){
    methods.close();
  }
});

$(document).bind('click', function(event){
  if(!$(event.target).closest(settings['selector']).length){
    methods.close();
  }
});

return this.each(function(){
  $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
  $(settings['open'], this).bind('click', methods.open);
  $(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
    event.preventDefault();
    methods.close();
  });
});
  }

 }).call(this);

编辑：

我发现出了什么问题。感谢你们！

jsfiddle

4

2 回答 2

0

如果您使用的是 jQuery，您可以在成功登录后调用以下命令。

$('a#login.open').text('Logged In');

这是如果你试图对你正在搜索的元素非常具体。如果您使用的是 chrome 或 IE 以外的任何东西，您可以在控制台调试器窗口中尝试一下，看看它是否有效。

于 2013-08-13T01:00:20.230 回答
0

这是一个非常简单的解决方案。它将登录链接替换为包含所需文本的跨度。 http://jsfiddle.net/gVVcM/

jQuery：

$('button').on('click',function(){
    $('#login').replaceWith('<span>Logged In</span>');
});

HTML：

<a id='login' href='#'>Log In</a>
<button>Submit</button>

编辑：现在您发布了提交 ID。

$('#submit').on('click',function(){
    $('#login').replaceWith('<span>Logged In</span>');
});

编辑2：防止默认？

$('#submit').on('click',function(e){
    e.preventDefault();
    $('#login').replaceWith('<span>Logged In</span>');
});
于 2013-08-13T01:47:53.050 回答