Question

在Bootstrap toggle button控件的示例中，有两个打开和关闭它们的示例：通过API和输入。

“API vs Input”部分：

<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button>
<button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button>
<script>
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  function toggleOnByInput() {
    $('#toggle-trigger').prop('checked', true).change()
  }
  function toggleOffByInput() {
    $('#toggle-trigger').prop('checked', false).change()
  }
</script>

可以看出，API操作按钮意味着调用bootstrapToogle()函数，而输入操作意味着调用prop('checked', true).change()。

这两种方法有什么区别？在视觉上他们也这样做。

Answer 1

我看到的主要区别是您可以使用prop()更改复选框，而不必知道它已绑定到插件。

如果插件已被删除...如果您始终使用prop()，则行为不会在基础输入上发生变化。

相反，在现有代码之上添加插件也不需要更改代码。

我认为作者的意图是展示该插件在外部触发时识别change事件

Answer 2

bootstrapToggle处理的不仅仅是更改属性：

Toggle.prototype.on = function (silent) {
    if (this.$element.prop('disabled')) return false
    this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle)
    this.$element.prop('checked', true)
    if (!silent) this.trigger()
}

Toggle.prototype.off = function (silent) {
    if (this.$element.prop('disabled')) return false
    this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off')
    this.$element.prop('checked', false)
    if (!silent) this.trigger()
}

据我所知，在使用bootstrapToggle时为on / off状态添加单独的类，否则你必须使用CSS来检查元素是否被选中。这真的是我能找到的唯一区别，所以除了你设置切换的方式之外，它不应该有很大的不同。

bootstrap-toggle中切换按钮的“API”和“输入”切换有什么区别？

2 个答案: