Javascript 有时我需要再次单击一个引导复选框按钮。为什么？

这在60%的时间内有效。但有时我需要再次点击按钮。当然，这不会在真实的网络世界中实现。我正在使用一个修改过的引导程序min，它可能是一个不允许使用其他类型按钮的选项。想象一下，它们与“数据颜色=主色”相同。“数据颜色=icomold”是唯一的补充

以下是需要您进行故障排除的重要部件： 按钮

            <tr>
            <td colspan="5">
                <span class="button-checkbox">
                    <button type="button" class="btn" data-color="icomold">Injection Mold</button>
                    <input type="checkbox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkbox">
                    <button type="button" class="btn" data-color="icomold">Export Mold</button>
                    <input type="checkbox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkbox">
                    <button type="button" class="btn" data-color="icomold">CNC Plastic</button>
                    <input type="checkbox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkbox">
                    <button type="button" class="btn" data-color="icomold">CNC Metal</button>
                    <input type="checkbox" class="hidden"/>
                </span>
                &nbsp;&nbsp;                
                <span class="button-checkbox">
                    <button type="button" class="btn" data-color="icomold">Urethane Casting</button>
                    <input type="checkbox" class="hidden" />
                </span>
            </td>
        </tr>

注射模
出口模具
数控塑料
数控金属
聚氨酯铸件

下面是脚本：

        $(function() {
        $('.button-checkbox').each(function() {

            // Settings
            var $widget = $(this),
        $button = $widget.find('button'),
        $checkbox = $widget.find('input:checkbox'),
        color = $button.data('color'),
        settings = {
            on: {
                icon: 'glyphicon glyphicon-check'
            },
            off: {
                icon: 'glyphicon glyphicon-unchecked'
            }
        };

            // Event Handlers
            $button.on('click', function() {
                $checkbox.prop('checked', !$checkbox.is(':checked'));
                $checkbox.triggerHandler('change');
                updateDisplay();
            });
            $checkbox.on('change', function() {
                updateDisplay();
            });

            // Actions
            function updateDisplay() {
                var isChecked = $checkbox.is(':checked');

                // Update the button's color
                    if (isChecked) {
                        //We've activated one
                        //now we need to deactivate the rest of the buttons
                        //var elm = document.createElement("div");
                        var y = document.getElementsByClassName('btn btn-icomold active');
                        var aNode = y[0];
                        if (typeof (aNode) != "undefined" && $button.context.innerText != aNode.innerText) 
                        {
                            aNode.className = "btn btn-default";
                            var state = aNode.childNodes[0]
                            state.className = "state-icon glyphicon glyphicon-unchecked";
                        }

                        $button
                        .removeClass('btn-default')
                        .addClass('btn-' + color + ' active');

                    }
                    else {
                        $button
                        .removeClass('btn-' + color + ' active')
                        .addClass('btn-default');
                    }

                    // Set the button's state
                    $button.data('state', (isChecked) ? "on" : "off");

                    // Set the button's icon
                    $button.find('.state-icon')
                    .removeClass()
                    .addClass('state-icon ' + settings[$button.data('state')].icon);
            }

            // Initialization
            function init() {

                updateDisplay();

                // Inject the icon if applicable
                if ($button.find('.state-icon').length == 0) {
                    $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
                }
            }
            init();
        });
    });

$（函数（）{
$（'.button复选框'）。每个（函数（）{
//背景
var$widget=$（这个），
$button=$widget.find（'button'），
$checkbox=$widget.find（'input:checkbox'），
颜色=$button.data（'color'），
设置={
关于：{
图标：“glyphicon glyphicon检查”
},
关：{
图标：“glyphicon glyphicon未选中”
}
};
//事件处理程序
$button.on（'click'，function（）{
$checkbox.prop（'checked'，！$checkbox.is（':checked'）；
$checkbox.triggerHandler（'change'）；
updateDisplay（）；
});
$checkbox.on（'change'，function（）{
updateDisplay（）；
});
//行动
函数updateDisplay（）{
var isChecked=$checkbox.is（“：checked”）；
//更新按钮的颜色
如果（已检查）{
//我们启动了一个
//现在我们需要关闭其余的按钮
//var elm=document.createElement（“div”）；
var y=document.getElementsByClassName（'btn btn icomold active'）；
var阳极=y[0]；
if（typeof（阳极）！=“未定义”&&$button.context.innerText！=阳极.innerText）
{
阳极.className=“btn btn默认值”；
var状态=阳极。子节点[0]
state.className=“未选中状态图标glypicon”；
}
美元按钮
.removeClass（'btn-default'）
.addClass（'btn-'+颜色+'active'）；
}
否则{
美元按钮
.removeClass（'btn-'+颜色+'active'）
.addClass（“btn-default”）；
}
//设置按钮的状态
$button.data（'状态'，（已检查）？“打开”：“关闭”）；
//设置按钮的图标
$button.find（“.state图标”）
.removeClass（）
.addClass（'state-icon'+设置[$button.data（'state'）].icon）；
}
//初始化
函数init（）{
updateDisplay（）；
//如果适用，插入图标
如果（$button.find（'.state icon'）。长度==0）{
$button.prepend（“”）；
}
}
init（）；
});
});

以下是修复程序

 function updateDisplay(from) {
            var isChecked = $checkbox.is(':checked');
            isChecked = from;

因此，就我而言，我不在乎原始值是多少。 在Init和一个事件上，我正在发送它需要更改的内容

// Initialization
        function init() {

            updateDisplay(false);

初始化时为False。。。在“单击”事件中为True。出于我的目的：没有理由有一个松开事件

// Event Handlers
        $button.on('click', function() {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay(true);
        });

Dossy强调UpdateDisplay已经发生了两次，这在上面值得称赞。 这一部分需要注释掉：

    //$checkbox.on('change', function() {
    //          updateDisplay();
    //    });

---

控制台中有错误吗？正常按钮（不是icomold）是否能正常工作？Re:Clint-I已将全部切换为数据颜色=主。同样的问题也在发生。脚本中的“停用”例程可能是罪魁祸首。不会生成任何错误。这里是真正奇怪的部分。出现视觉错误时，按钮将保持灰色高亮显示。好像我还在它上面徘徊。但是，我发现DOM的CSS信息在一个较暗的按钮和下一个按钮之间没有区别。如前所述，如果单击

元素，

updateDisplay（）

将被调用一次，在按钮的

单击处理程序中调用一次，在复选框的
更改处理程序中调用一次。执行两次有没有什么意外的后果？我注意到，它确实执行了两次。这段代码来自几个来源。我过去擅长编写脚本，现在才重新开始。实际上，有什么理由我需要两个不同的事件处理程序吗？我将尝试删除复选框1。嗯。。我可以注释掉$checkbox.on（'change'）。我得到了相同的功能（外观没有变化）。有明显的区别。现在它只命中功能一次。但是问题可能更清楚。不是解决方案（对我来说）。在“失败”时顺序。当它点击“UpdateDisplay”函数“isChecked”时，它会变为false，但它应该变为true。然后它会进入“UpdateDisplay”的“Else”部分。我会评论说，这并没有真正回答前面提到的原始问题。不过，我可以在下周继续完成该页，一切都很好。