如何读取我的自定义 jQuery 小部件的选项？

Question

我已经准备好 a simple test case 我的问题：

我有一个自定义 jQuery UI 小部件代表游戏 table。

我正在尝试根据 max 选项显示或隐藏游戏 tables，它的值可以是 2 或 3。

我试过调用以下方法都没有成功，它们都没有找到：

$(this).option('max')
$(this).options('max')
$(这个).table('max')

下面是我的代码-

$.widget('my.table', {
  options: {
    tid: NaN,
    max: NaN,
    players: []
  },
  _create: function() {
    this._hoverable(this.element);
    this.element.addClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
    this.tidDiv = $('<div/>', { 'class': 'my-table-tid'}).appendTo(this.element);
    this._refresh();
    },
  _destroy: function() {
    this.tidDiv.remove();
    this.element.removeClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
  },
  _setOptions: function() {
    this._superApply(arguments);
    this._refresh();
  },
  _refresh: function() {
    this.element.css('background', this.options.max === 2 ? '#39C' : '#AD8');
    this.tidDiv.text('#' + this.options.tid);
  }
});

$('<div/>', {id: 'table2' }).table({ tid: 2,  max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table22'}).table({ tid: 22, max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table3' }).table({ tid: 3,  max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table13'}).table({ tid: 13, max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table33'}).table({ tid: 30, max: 3 }).appendTo($('#tablesDiv'));

$('#twoRadio').on('change', function(ev) {
  console.log('XXX value two: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).option('max'));
  });
});

$('#threeRadio').on('change', function(ev) {
  console.log('XXX value three: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).options('max'));
  });
});

.my-table {
    position:           relative;
    float:              left; 
    margin:             8px;
    color:              white;
    width:              100px; 
    height:             100px; 
}

.my-table-tid {
    position:           absolute;
    font-size:          1.2em; 
    top:                20px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<div>
  <fieldset id="modeRadio">
    Show game tables for:
    <label>
      <input type="radio" name="modeRadio" id="twoRadio">
      2 players
    </label>
    <label>
      <input type="radio" name="modeRadio" id="threeRadio" checked>
      3 players
    </label>
  </fieldset>
</div>

<div id="tablesDiv"/>

Answer 1

自定义小部件中的

max 选项已作为 data attribute 添加到 div 并在需要时检索。希望这能解决您的问题。

$.widget('my.table', {
  options: {
    tid: NaN,
    max: NaN,
    players: []
  },
  _create: function() {
    this._hoverable(this.element);
    this.element.addClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
    this.tidDiv = $('<div/>', { 'class': 'my-table-tid', 'data-max' : this.options.max}).appendTo(this.element);
    this._refresh();
    },
  _destroy: function() {
    this.tidDiv.remove();
    this.element.removeClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
  },
  _setOptions: function() {
    this._superApply(arguments);
    this._refresh();
  },
  _refresh: function() {
    this.element.css('background', this.options.max === 2 ? '#39C' : '#AD8');
    this.tidDiv.text('#' + this.options.tid);
  }
});

$('<div/>', {id: 'table2' }).table({ tid: 2,  max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table22'}).table({ tid: 22, max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table3' }).table({ tid: 3,  max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table13'}).table({ tid: 13, max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table33'}).table({ tid: 30, max: 3 }).appendTo($('#tablesDiv'));

$('#twoRadio').on('change', function(ev) {
  console.log('XXX value two: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).find("div.my-table-tid").data('max'));
  });
});

$('#threeRadio').on('change', function(ev) {
  console.log('XXX value three: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).find("div.my-table-tid").data('max'));
  });
});

.my-table {
    position:           relative;
    float:              left; 
    margin:             8px;
    color:              white;
    width:              100px; 
    height:             100px; 
}

.my-table-tid {
    position:           absolute;
    font-size:          1.2em; 
    top:                20px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css" rel="stylesheet" />

<div>
  <fieldset id="modeRadio">
    Show game tables for:
    <label>
      <input type="radio" name="modeRadio" id="twoRadio">
      2 players
    </label>
    <label>
      <input type="radio" name="modeRadio" id="threeRadio" checked>
      3 players
    </label>
  </fieldset>
</div>

<div id="tablesDiv"/>

如何读取我的自定义 jQuery 小部件的选项？

How to read an option of my custom jQuery widget?

jquery

jquery-ui

radio-button

jquery-ui-widget

jquery-ui-widget-factory