javascript - x 不是函数(选择值)

Question

我正在制作一个脚本，我可以通过单击带有数据值的列表项来更改输入值，但我只是卡住了，不知道有什么问题。单击列表项时，控制台中会出现“this.setSelectValue”不是函数的错误。

  var FontSwatch = function (swatch, select) {
    this.swatch = swatch;
    this.select = select;
    this.bindEvents();
  };

  FontSwatch.prototype.bindEvents = function () {
    this.swatch.find('.swatch-item').on('click', this.handleSwatchClick);
  };

  FontSwatch.prototype.handleSwatchClick = function (e) {
    var target = $j(e.currentTarget);
    if (this.setSelectValue(target.data('value'))) {
      this.select.trigger('change');
      this.addSelectedClass(target);
    }
  };

  FontSwatch.prototype.setSelectValue = function (value) {
    return this.select.val(value).length === 1;
  };

  FontSwatch.prototype.addSelectedClass = function (selectedItem) {
    this.swatch.children().removeClass('selected');
    selectedItem.addClass('selected');
  };

  fontSwatch = new FontSwatch($j('.swatch'), $j('.font-select'))

Answer 1

当 jQuery 调用事件处理程序时，它会将上下文设置为事件目标。您需要将该方法绑定(bind)到 FontSwatch 对象。

  FontSwatch.prototype.bindEvents = function () {
    this.swatch.find('.swatch-item').on('click', this.handleSwatchClick.bind(this));
  };

更一般地说，使用 value.functionName 作为回调不会将函数绑定(bind)到给定值。上下文仅在您使用 value.functionName() 语法调用函数时设置，而不是在您将 value.functionName 保存为某处的值时设置。在那种情况下，它只是在没有任何上下文的情况下保存函数。