jquery - 淡出文章并同时删除表格？

Question

我有一篇文章：

<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输入一个函数时它不起作用！

Answer 1

this.show()在 范围内工作得很好close()，因为this在范围内close()，但在范围内不可用.on('click') callback function，所以你需要保留this下面的引用并重用它。

 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);
            })
    }