2

私はjqueryが初めてです。ここで大きな疑問があります。基本的に私はjqueryで再帰的なことをしたいです! div内にテキストボックスがあります。ユーザーはテキストボックスに自分の名前を入力し、テキストボックスをクリックすると、テキストボックスを非表示にして、ユーザーが部門のテキストボックスに書いたものを印刷したい(私はそれを完全にうまく行うことができますが、問題先にあります）。ユーザーが入力ミスを犯した場合、ユーザーがそのdivをクリックしたときに同じテキストボックスを元に戻したいとします。そして、再びそのテキストボックスをクリックすると、テキストボックスが非表示になり、入力されたテキストが div に出力されます。

私の HTML コード:

 <html>
<body>
<div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" >  <input   type="text"  /></div>
</body>
</html>

Jクエリ:

$(document).ready(function () {
  $("#filltheblank1").children(this).blur(function () {
    if ($(this).val()) {
      var entered = $(this).val().toUpperCase();
    }
    $(this).hide(500, function () {
      $(this).parent(this).html(entered).click(function () {
        //now what to do here. I want that when user clicks o the div, the textbox should come back and when he clicks out again, it should go away and the text he entered should be preinted

      });
    });
  });
});

誰か助けてください

4

1 に答える 1

4

最初に、テキストを表示する別の div を追加display:noneし、最初は非表示にします。

<html>
 <body>
  <div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" >       
    <input type="text"  />
  </div>
  <div id="message" style="display:none"></div>
</body>
</html>

次に、JS コードで、CSS セレクターを改善して、入力要素 htm にアクセスする必要があります。これは、入力が 1 つしかないと仮定した場合の方法です。

$(document).ready(function(){

 $("#filltheblank1 input").on('blur', function(){ //on is how it should be done on jQuery 1.7 and up
    if($(this).val()){
      var entered = $(this).val().toUpperCase();
    }
    $("#filltheblank1").fadeOut(500, function(){
     $("#message").html(entered);
     $("#message").show(); //shows hidden div
    }
 });

 //event to show the input when user clicks the div
 $("#message").on('click', function(){
    $(this).hide();
    $("#filltheblank1").fadeIn();
 });
});

やりたいことを実行するためにイベントを分離し、要素に ID を追加して JavaScript コードをより簡単かつ高速にしました。

于 2013-01-13T16:07:02.667 に答える