1

我正在尝试更改 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>
4

1 回答 1

1

我给你做了一些修复。检查演示。

主要问题是：

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

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

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

于 2012-09-26T01:50:49.500 回答