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调用事件处理程序时，它将上下文设置为事件目标。您需要将方法绑定到FontSwatch对象。

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

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

x不是函数（selectvalue）

1 个答案: