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>

查询：

$(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，假设只有一个输入，我会这样做：

$(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 回答