0

当用户单击输入字段时，我试图显示一个 div，但是，我遇到了几个问题......

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

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

我也为此创建了一个 jsfiddle http://jsfiddle.net/NEmYv/

代码

<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 中得到回答……但我真的可以在这件事上使用你的帮助。如果这是一个卑鄙的问题，我提前道歉......

4

1 回答 1

2

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

这里的小提琴代码 是我所做的：

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

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

于 2012-06-16T00:17:30.943 回答