我已经搜索了 3 个小时，但找不到解决方案。接下来就是当您单击表单中的输入字段时，旁边的信息框会显示出来。我试着弄乱 jQuery，但就是无法让它工作，即使我确定代码是正确的(我们不总是哈哈大笑)。
无论如何，我很感激任何解决方案。
我对 jquery/css/html 的尝试是这样的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
.infoBubble {
visibility:hidden;
color:#000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
</script>
</head>
<body>
<form action="process.php" method="get">
<div class="row">
<span class="label">Description: </span>
<input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
</div>
</form>
</body>
</html>
最佳答案
首先，您的 JavaScript 在文档加载完成之前执行，这意味着输入字段不存在。将您的代码附加到 jQuery 的 ready防止这种情况发生的事件。
$(function() {
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
}
其次，使用visiblity: hidden 隐藏的元素仍会占用布局空间。通常你会使用 display: none 来让它看起来好像元素根本不存在。无论哪种方式，您都可以使用 show使元素可见的方法。
CSS:
.infoBubble {
color: #000;
display: none;
}
JavaScript:
$('.infoBubble').show();
第三，您的用户可能会在不点击输入的情况下聚焦输入(例如，通过按 Tab 键)!通过使用 focus事件而不是 click 无论如何你都可以显示消息。
$('.box').focus(function() {
$('.infoBubble').show()
});
除上述之外，您还可以使用 blur当用户不再关注输入时(当他们单击其他地方或跳出输入时)隐藏消息的事件。总之，你最终会得到这样的结果:
$(function() {
$('.box').focus(function() {
$('.infoBubble').show();
}).blur(function() {
$('.infoBubble').hide();
});
}
关于javascript - 单击时显示信息框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6534241/