0

私は記事を持っています：

<article>
    Some paragraphs.
</article>

その下に私がいますcontact：

<div id="contact">
    stuff, this form is 600 px tall
</div>

contactに設定されdisplay:none;ます。

jQueryを使用して切り替えます。私がやろうとしているのは、このスクリプトを変更http://tutsplus.com/lesson/slides-and-structure/して、記事のテキストをフェードアウトしてから、連絡先フォームにスライドさせることです。いくつかの問題があります。

コード：

<script>

(function() {

$('html').addClass('js');

var contactForm = {

    container: $('#contact'),
    article: $('article'),

    init: function() {
        $('<button></button>', {
            text: 'Contact Me'
        })
            .insertAfter('article:first')
            .on('click', function() {
                console.log(this);
                this.show();
                // contactForm.article.fadeToggle(300);
                // contactForm.container.show();
            })
    },

    show: function() {
        contactForm.close.call(contactForm.container);
        contactForm.container.slideToggle(300);
    },

    close: function() {
        console.log(this);
        $('<span class=close>X</span>')
            .prependTo(this)
            .on('click', function(){
                contactForm.article.fadeToggle(300);
                contactForm.container.slideToggle(300);
            })
    }
};

contactForm.init();

})();

</script>

動作していない部分は次のとおりです。

.on('click', function() {
    console.log(this);
    this.show();
    // contactForm.article.fadeToggle(300);
    // contactForm.container.show();
})

私がやる.on('click', this.show);とうまくいきますthis.showが、関数を入れるとうまくいきません！

4

1 に答える 1

1

this.show()はの範囲内にありますが、の範囲内では使用できないclose()ため、内で問題なく動作します。したがって、以下のような参照を保持し、それを再利用する必要があります。thisclose().on('click') callback functionthis

 close: function() {
        // keeping reference
        var reference = this;

        $('<span class=close>X</span>')
            .prependTo(this)
            .on('click', function(){
                //  using above reference here
                reference.article.fadeToggle(300);
                reference.container.slideToggle(300);
            })
    }
于 2012-05-31T16:36:38.233 に答える