淡出一篇文章並同時下載一個表單？

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