Jquery：隐藏文本框，然后显示它
我对jquery非常陌生。我有一个很大的疑问。基本上我想在jquery中做一个递归类的事情！我在一个div中有一个文本框。用户会在文本框中输入他的名字，然后当他点击文本框时，我想隐藏文本框并打印用户在分区中的文本框中写的任何内容。我可以做得很好，但问题就在前面。假设用户在键入时犯了一些错误，现在我想要的是，当用户再次单击该div时，我希望返回相同的文本框。然后，当他再次单击该文本框时，文本框应该隐藏，并且输入的文本应该打印在div中 我的HTML代码：Jquery：隐藏文本框，然后显示它,jquery,Jquery,我对jquery非常陌生。我有一个很大的疑问。基本上我想在jquery中做一个递归类的事情！我在一个div中有一个文本框。用户会在文本框中输入他的名字，然后当他点击文本框时，我想隐藏文本框并打印用户在分区中的文本框中写的任何内容。我可以做得很好，但问题就在前面。假设用户在键入时犯了一些错误，现在我想要的是，当用户再次单击该div时，我希望返回相同的文本框。然后，当他再次单击该文本框时，文本框应该隐藏，并且输入的文本应该打印在div中 我的HTML代码： <html> <bod
<html>
<body>
<div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" > <input type="text" /></div>
</body>
</html>
请帮助某人首先，我将添加另一个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>
我做了一些操作来分离事件，并向元素添加了ID，以使javascript代码更简单、更快。首先，我要添加另一个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>
我做了一些事情来分离事件来做你想做的事情，并在元素中添加了ID，使javascript代码变得更简单、更快。没有真正理解它，但它应该看起来更像这样。没有真正理解它，但它应该看起来更像你让它变得如此简单。谢谢你能给我解释一下上面代码第二行中$FillingBlank1输入的含义吗？为什么要在括号$FillingBlank1 input=>中写input=>你的目标是FillingBlank1元素中任何一个“input”类型的元素很酷，最后一个问题！！如果我想处理多个文本框，那么对应于它们的div是这样的呢？我必须为每一个单独编写代码吗？如果你想让它们都这样做，那么当前的一个就可以了。如果你想做一件不同的事情，你可以使用jQuery.each函数，并为它们指定一个常规事件，你可以使用类和数字，比如.message-3，让它对每个div/inputwo都有效。你做得很简单。谢谢你能给我解释一下上面代码第二行中$FillingBlank1输入的含义吗？为什么要在括号$FillingBlank1 input=>中写input=>你的目标是FillingBlank1元素中任何一个“input”类型的元素很酷，最后一个问题！！如果我想处理多个文本框，那么对应于它们的div是这样的呢？我必须为每一个单独编写代码吗？如果你想让它们都这样做，那么当前的一个就可以了。如果您想做不同的事情，可以使用jQuery.each函数并向它们指定一个常规事件，您可以使用类和数字，如.message-3，使其适用于每个div/input
$(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();
});
});