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.

主要问题是：

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

$this.attr(id)，您错过了var $this = $(this);以外，或只是使用var id = this.id;。

$('bubble')应为$(#bubble)

当输入聚焦时，jQuery fadeIn div？

1 个答案: