javascript - Bootstrap 数据切换 ="button"不适用于

Question

我正在使用 Bootstrap 中的“数据切换”选项作为按钮。在按钮中，我有一个带有字形图标和一些文本的按钮。但是，当您单击文本时它会起作用，但是当您单击字形图标时它不会触发数据切换。由于数据切换在 JSFiddle 中不起作用，我无法发布指向它的链接。

HTML:

<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>

JavaScript:

document.getElementById("showHide").onclick = function () {
    if ($("#showHide").text() == " show") {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
        document.getElementById("showHide").blur();
    } else {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
        document.getElementById("showHide").blur();
    }
}

我在网上查了一下，但没有找到解决方案，也没有找到遇到同样问题的人。

Answer 1

在传播切换事件之前，跨度似乎已被替换。您可以使用 button 方法来激活切换而不是数据属性。

<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button>

document.getElementById("showHide").onclick = function () {
    if ($("#showHide").text() == " show") {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
        jQuery("#showHide").button('toggle');        
        document.getElementById("showHide").blur();
    } else {
        document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
        jQuery("#showHide").button('toggle');        
        document.getElementById("showHide").blur();
    }
}

View Fiddle