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 に答える