Question

我试图在我的其中一页中使用bootstraptoggle。初始状态为关闭/禁用。

页面将加载多个布尔值并将其存储为隐藏文本。然后，我有一个脚本，可通过其ID查找它们。在该隐藏文本上，应切换滑块。

我能够获取隐藏的文本并进行条件检查，但是由于某种原因，我无法切换滑块。

这是我的代码：

$(document).ready(function () {
  var flags = [];
  var userID = '',
      toggleSlider = '';

  flags = document.querySelectorAll('*[id^="activeFlag_"]');

  flags.forEach(function (flag) {
    userID = flag.id.split('_')[1];

    // This is where i search for the hidden text
    if (flag.firstChild.data == 'True') {
      // Nothing works here.
      $('#activeToggle_' + userID).bootstrapToggle('toggle');
    }
  });
});

这是我需要使用的html代码：

    <p id="activeFlag_@user1">@item.activeFlag</p>
    <div class="checkbox">
        <label>
            <input id="activeToggle_user1" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
        </label>
    </div>

Answer 1

您的代码太不透明，没有任何数据示例。但是，有一件事可能是其问题的原因：

if (flag.firstChild.data == 'True') {

尝试将其替换为：

if (flag.firstElementChild.data == 'True') {

Here，您可以找到解释：

firstChild属性返回指定节点的第一个子节点，作为Node对象。

此属性与firstElementChild之间的区别在于，firstChild返回第一个子节点作为元素节点，文本节点或注释节点（取决于第一个子节点），而firstElementChild返回第一个子节点作为元素节点（忽略文本和注释节点）。

注意：元素内部的空格被视为文本，文本被视为节点（请参见“更多示例”）。

添加示例代码后进行更新

对于您提供的示例代码，应更改split参数：

userID = flag.id.split('_')[1];

收件人：

userID = flag.id.split('_@')[1];

感谢吐温来进行初始jsfiddle。我已经对其进行了相应的更新：jsfiddle

Answer 2

我想问题是，以下部分没有为切换$('#activeToggle_' + userID).bootstrapToggle('toggle');使用正确的ID

您的html ID为activeToggle_user1，但是上面的js部分可能会解析为#activeToggle_1。因此此处缺少文本user。

我在这里创建了一个有效的提琴：https://jsfiddle.net/pbcrh5d2/

Answer 3

好吧，由于某种原因，asp.net和javascript在应对时遇到了问题。我使用asp.net提供了JavaScript以构建字符串。所以我切换到了表中使用的原始ID。

感谢您的提示和帮助。

BootstrapToggle开关有条件地切换状态

3 个答案:

添加示例代码后进行更新