javascript - 输入焦点时 jQuery fadeIn div？

Question

我正在尝试更改 div 的 innerHTML 并在表单中的输入成为焦点时将其淡入。我还想测试它是否完全淡入，因为当页面加载时它会开始淡出。

总而言之，我基本上想在另一个 div 中显示一个工具提示，并在我的输入集中在我的表单上时通过淡入和淡出切换工具提示。

这是我目前所拥有的:

<script type="text/javascript">
var visible = 0;
var nameText = "<p>May I get your<br/>full name?</p>";
var emailText = "<p>Could I please<br/>get your email<br/>address?</p>";
var messageText = "<p>What is the<br/>message you<br/>would like to send?</p>";

$('.inp').on("focus", function(event){
    if (visible == 0)
    {
        var fadeTime = 1;
        visible = 1;
    }
    else
        fadeTime = 500;

    $('bubble').fadeOut(fadeTime).html(function() {
        if ($this.attr('id') == "name")
            return nameText;
        else if ($this.attr('id') == "email")
            return emailText;
        else if ($this.attr('id') == "message")
            return messageText;
    }).fadeIn(500);

});
</script>

我没有收到任何 JavaScript 错误。我的气泡和输入的 HTML 如下所示:

<footer class="container">
<div class="row reveal">
    <div class="mailman fourcol">
        <img src="images/mailman.png" alt="The Mail Man" />
        <div id="bubble">
        </div>
    </div>
    <div class="contact eightcol last">

        <h1>CONTACT US FOR</h1> <h1>MORE INFORMATION</h1>
        <div class="clear"></div>
        <form name="contact-form">

            <div class="form-left">

                <div class="contact-name inp">
                    <input type="text" name="name" id="name" value="Name" />
                </div>

                <div class="contact-email inp">
                    <input type="text" name="email" id="email" value="Email" />
                </div>

                <div class="clear"></div>

                <div class="contact-message inp">
                    <input type="text" name="message" id="message" value="Message" />
                </div>

            </div>

            <div class="contact-submit">
                <a href=""></a>
            </div>

        </form>

    </div>
</div>
</footer>

Answer 1

我对你做了一些修复。 Check the demo.

主要问题是:

1. 焦点事件应该在输入元素上触发，$('.inp').on("focus", function(event){ 应该是 $('. inp').on("焦点", '输入', 函数(事件){

2. $this.attr(id)，你错过了 var $this = $(this); 外面，或者只是使用 var id = this.id;.

3. $('bubble') 应该是 $(#bubble)