Question

我认为我目前写的是非常好的javascript，但我正在尝试采用更加面向对象的方法。我刚刚开始这样，请原谅我的诺言。我正在将我的一些功能移到对象上并遇到了这个问题。以前，我有一个像这样工作的手风琴功能：

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

我遇到的问题是＆＃39;这个＆＃39;适用于面向对象的Javascript。在原始设置中，我能够使用＆＃39;这个＆＃39;引用被点击的手风琴内容。我无法使用面向对象的方法访问它。有人可以帮帮我吗？

Answer 1

您可以使用event.target来引用触发事件的元素，或event.currentTarget来引用处理程序绑定的元素，这相当于使用this。< / p>

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

Answer 2

在toggleAccordion（）中，您仍然可以使用$（this）来获取已被点击的accordion title元素。希望你能得到适当的手风琴内容。

首先像PHPglue提到的那样绑定它：

jQuery(this.accordionTrigger).click(this.toggleAccordion);

然后你可以用$（this）来获得accordionTitle：

toggleAccordion: function() {
    var $accordionTitle = $(this);
}

基本上当你像这样绑定它并触发点击时，范围会改变，并且＆＃34;这个＆＃34;不再是＆＃34;手风琴＆＃34;。

如果您需要访问accordionContent和accordionTrigger，您可以将其传递给函数toggleAccordion或使用Accordion.accordionContent和Accordion.accordionTrigger。

其他来源：http://api.jquery.com/click/#click-eventData-handler

Answer 3

问题不在于this对OOP JavaScript的作用，因为this总是引用调用者对象。

您可以使用You Don't Know JS: this & Object Prototypes详细了解this。

你可以确实使用event.target和event.currentTarget作为@Felix说，但如果你不理解如何正确使用this或至少理解如何使用，你最终会遇到麻烦它有效。

Answer 4

@FelixKling解决方案的替代方法，删除.bind()，使用event.data访问jQuery(this)处理程序中的Accordion和accordionTrigger对象

＆＃13;

var Accordion = {
  accordionContent: '.accordion-container .accordion-content p',
  accordionTrigger: 'div',
  init: function() {
    // set `event.data` to `this`:`Accordion` at first parameter to `.click()`
    jQuery(this.accordionTrigger).click(this, this.toggleAccordion);
  },
  toggleAccordion: function(e) {
    // Slide up any open content
    // jQuery(e.data.accordionContent).slideUp();
    // Remove any active classes
    // jQuery(e.data.accordionTrigger).removeClass("active");
    // If the sibling content is hidden
    // `this`:`div`
    if (jQuery(this).is(e.data.accordionTrigger)) {
      console.log(this, e.data, $(e.data.accordionTrigger))
    }
  }
}
Accordion.init()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  click
</div>

＆＃13;

＆＃39;这＆＃39;面向对象的Javascript

4 个答案: