如何动态更改对话框颜色？ - 引导箱答案

【问题标题】：How to change dialog color dynamically? - Bootbox如何动态更改对话框颜色？ - 引导箱
【发布时间】：2018-03-21 15:48:42
【问题描述】：

要更改Bootbox对话框中的文本，我使用<span id='someID'></span>，然后使用jQuery如下：$("#someID").text("The new Text");

我面临的问题是如何更改对话框颜色？

在我的对话框中，我有以下内容（用于设置对话框颜色）：

className: "modal-danger nonumpad",

我想在动作发生时将类名更改为modal-success nonumpad。

这是我的代码：

callDialog = bootbox.dialog({
    className: "modal-danger nonumpad", // the class I want to change
    closeButton: false,
    animate: true,
    title: 'Making Call',
    message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i><span id="test"> Waiting for Reply... </span></div>',
    onEscape: null,
    buttons: {
        hangup: {
            label: "<span id='hangup' <i class=\"fa fa-phone\"></i> Cancel </span>",
            className: "btn-warning btn-lg pull-left",
            callback: function(){
                $("#dynamicMsg").text("This is dynamic msg");
                return false;
            }
        }
    }
});

callDialog.init(function(){
    peer.on('connection', function(conn) {
        conn.on('data', function(data){
    // Will print 'hi!'
        call = data;
        console.log(call);
        if(call == "ACCEPT"){
            $("#test").text("This is dynamic msg");
            $("#hangup").text("Hangup");
        } else {

        }
    });
    });
});

如何更改init() 函数中的className？

注意： <span id='someID'></span> 不起作用。

【问题讨论】：

标签： javascript jquery meteor bootbox

【解决方案1】：

由于您有对对话框的引用，因此应该使用toggleClass：

callDialog.find('.modal-danger').toggleClass('modal-danger modal-success');

这将找到类modal-danger 的子元素，然后在添加类modal-success 时将其删除。

【讨论】：

感谢您的回复。我试过你的解决方案，它没有为我解决它

【解决方案2】：

你可以试试：

$("#someID").removeClass('modal-danger').addClass('modal-success');

someID 必须是对话的 ID。或者，如果您有多个或它是动态的，请改为引用一个类名。

$(".someClass").removeClass('modal-danger').addClass('modal-success');

【讨论】：

你能指导一下用什么替换someID吗？因为我创建对话框的方式不同，因为它在没有 ID 的问题中显示

【解决方案3】：

你能指导一下用什么替换 someID 吗？因为我现在的样子创建对话框是不同的，因为它在问题中显示没有身份证

回答您的评论问题后，您应该将其替换为您想要更改的元素的任何单独选择器。如果只是一个元素，你应该考虑给它一个 ID。根据您调用它的位置，您可以通过event.currentTarget 定义您的选择器，或者如果此时只有这些类"modal-danger nonumpad" 的此元素，您也可以将其用作选择器。

【讨论】：

【解决方案4】：

试试这个： $(callDialog).removeClass('modal-danger').addClass('modal-success');

$(callDialog) 选择引导框对话框对象分配给的变量并将其转换为JQuery Object。

.removeClass('modal-danger') 是一个JQuery method，用于从选定对象中删除作为参数传递的类。

.addClass('modal-success') 也是一个JQuery method，用于将作为参数传递的类添加到选定对象。

【讨论】：

请解释一下你的代码，这样更容易理解。