javascript - 面向对象的 Javascript 中的“This”

Question

我认为我目前写的 javascript 相当不错，但我正在尝试转向更面向对象的方法。我才刚刚开始，所以请原谅我的菜鸟。我正在将我的一些功能转移到对象上并遇到了这个问题。以前，我有一个像这样工作的 Accordion 函数:

jQuery(document).ready(function ($){

var accordionTrigger = $('.accordion-title');

function toggleAccordion() {
    // Set a variable for the accordion content
    var accordionContent = $('.accordion-container .accordion-content p');
    // Slide up any open content
    accordionContent.slideUp();
    // Remove any active classes
    accordionTrigger.removeClass("active");
    // If the sibling content is hidden
    if(!$(this).siblings().is(":visible")) {
        // slide it down
        $(this).siblings().slideDown();
        // add a class to the title so we can style the active state and change the svg
        $(this).addClass("active");
    }
}

accordionTrigger.on("click", toggleAccordion);

});

我已将其移至我的新设置中的一个对象，如下所示:

Accordion = {
accordionContent: '.accordion-container .accordion-content p',
accordionTrigger: '.accordion-title',
init: function() {
    jQuery(this.accordionTrigger).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function() {
    // Slide up any open content
    jQuery(this.accordionContent).slideUp();
    // Remove any active classes
    jQuery(this.accordionTrigger).removeClass("active");
    // If the sibling content is hidden
    if(!jQuery(this.accordionTrigger).siblings().is(":visible")) {
        // slide it down
        jQuery(this.accordionTrigger).siblings().slideDown();
        // add a class to the title so we can style the active state and change the svg
        jQuery(this.accordionTrigger).addClass("active");
    }
}
}

    jQuery(document).ready(function ($){
       Accordion.init();
    });

我遇到的问题是“this”在面向对象的 Javascript 中的工作方式。在最初的设置中，我能够使用“this”来引用被点击的 Accordion 内容。我无法使用面向对象的方法访问它。有人可以帮我吗？

Answer 1

您可以使用 event.target引用触发事件的元素，或 event.currentTarget引用处理程序绑定(bind)到的元素，这相当于使用 this。

toggleAccordion: function(event) {
    // Slide up any open content
    jQuery(this.accordionContent).slideUp();
    // Remove any active classes
    jQuery(this.accordionTrigger).removeClass("active");
    // If the sibling content is hidden
    if(!jQuery(event.currentTarget).siblings().is(":visible")) {
        // slide it down
        jQuery(event.currentTarget).siblings().slideDown();
        // add a class to the title so we can style the active state and change the svg
        jQuery(event.currentTarget).addClass("active");
    }
}

Learn more about event handling with jQuery .