将“登录”文本替换为“已用jquery登录”

Replace Log In text to say Logged in with jquery

本文关键字：登录 jquery 已用 文本替换      更新时间：2023-09-26

我对此相当陌生，在用javascript/jquery单击提交后，我需要帮助将链接"login"替换为登录。

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

  <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

这是一个非常简单的解决方案。它将登录链接替换为包含所需文本的span。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>');
});

edit2:是否阻止默认？。

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

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

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

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

相关文章：