时间戳

首页 > 解决方案 > jQuery插件中的“this”与来自事件监听器的“this”冲突

javascript - jQuery插件中的“this”与来自事件监听器的“this”冲突

问题描述

我正在尝试使用this以下 jQuery 插件中的关键字，但是我不想访问thisclick 事件的，而是this插件的。

我怎么做？目前我在 Plugin.prototype.toggleTranslationMode 函数中收到以下错误：

无法读取未定义的属性“enableTranslationMode”

;
(function($, window, document, undefined) {
  var pluginName = 'translationMode',
    defaults = {
      //marker: "value"
    };

  function Plugin(element, options) {
    this.element = $(element);
    this.options = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  Plugin.prototype.init = function() {
    this.getTranslationData();
    this.createMarkup();
    this.addEvents();
  };

  Plugin.prototype.getTranslationData = function() {
    this.elementIndex = this.element.data('element-index');
    this.translationIndex = this.element.data('translation-index');
    this.original = this.element.data('translation-original');
    this.translation = this.element.data('translation-trans');
    this.translationType = this.element.data('translation-type');
  }

  Plugin.prototype.createMarkup = function() {
    this.element.addClass('translation-container');
    this.element.wrapInner('<span class="editor"></span>');
    this.editor = this.element.find('.editor');
    this.addMarker();
  }

  Plugin.prototype.addMarker = function() {
    this.element.append('<div class="translation-marker">' + this.elementIndex + '-' + this.translationIndex + '</div>');
    this.marker = this.element.find('.translation-marker');
  };

  Plugin.prototype.enableTranslationMode = function() {
    console.log('translation mode enabled')
    this.element.addClass('translation-modal-visible');
    this.element.append('<div class="translation-modal">Original String:' + original + '</div>');
  }

  Plugin.prototype.disableTranslationMode = function() {
    console.log('translation mode disabled')
    this.element.removeClass('translation-modal-visible');
    this.element.find('.translation-modal').remove();
  }

  Plugin.prototype.addEvents = function() {
    this.disableLinksAndButtons();
    this.toggleTranslationMode();
  }

  /*
   * EVENTS
   */

  Plugin.prototype.toggleTranslationMode = function() {
    this.element.on('click', this.marker, function(e) {
      if ($(this).hasClass('translation-modal-visible')) {
        this.disableTranslationMode();
      } else {
        this.enableTranslationMode();
      }
    })
  }

  Plugin.prototype.disableLinksAndButtons = function() {
    $("a, button").on('click', function(e) {
      e.preventDefault();
    });
  }

  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName,
          new Plugin(this, options));
      }
    });
  }
})(jQuery, window, document);

jQuery(function($) {
  $('[data-translation-index]').translationMode();
});

标签： javascriptjquery

解决方案

thisinside 事件处理程序属于调用事件的元素。您正在尝试访问this.element. enableTranslationMode您的 click 事件处理程序内部并期望它与外部相同（原型函数范围）。情况不会如此。

您可以将外部 this 保存为另一个变量并在内部访问它。但是在您的情况下，我认为您可以直接访问this.enableTranslitionMode，因为您正在寻找元素本身。

推荐阅读