使用jquery .focusin显示div时，将焦点保持在输入文本字段中

Question

我正在尝试在用户点击输入字段时显示div，但是，我遇到了一些问题......

1）当用户点击输入字段时，div会显示，但是，与div的任何交互都会导致div消失...如何在用户与div交互时保持字段处于活动状态？< / p>

2）我有多个字段，并使用下面的代码...如何将其设置为多个字段ID并显示与每个特定div相关联的div（即输入字段id = age显示div id = tip -age，输入字段id = height - 显示div id = tip-height）

我也为此http://jsfiddle.net/NEmYv/

创作了一个jsfiddle

HTML CODE

<form id="measure">
<div id="tip-age" style="display:none;">text here</div>
<input type="text" id="age" />
<input type="submit">
</form>

的jQuery

$("#age").focusin(function() {
    $("#tip-age").show();
}).focusout(function () {
    $("#tip-age").hide();
});

我知道这可能会在jQuery API中得到解答......但我真的可以在这个问题上使用你的帮助。如果这是一个琐碎的问题，我提前道歉......

Answer 1

我创建了一个满足您要求的演示。你可以在这里查看演示：

the fiddle code 这就是我所做的：

$(".show-hidden-div").click(function() {
var inputId = $(this).attr('id');
$("#tip-"+inputId+"").show();});

如您所见，我创建了两个输入，每个输入都有一个相关的隐藏div。我添加了一个“show-hidden-input”类，因此您可以使用jquery处理所有相关输入。一旦点击了“show-hidden-input”类的输入，我得到唯一的id并用它来找到它相关的隐藏div。然后我会显示相关的div。