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

これは非常に簡単な解決策です。ログイン リンクを、必要なテキストを含むスパンに置き換えます。 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>');
});
于 2013-08-13T01:47:53.050 に答える