Как динамически изменять цвет диалогового окна? - Бутбокс
Чтобы изменить текст в диалоговом окне Бутбокс, я использую <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.info(call);
if (call == "ACCEPT"){
$("#test").text("This is dynamic msg");
$("#hangup").text("Hangup");
} else {
}
});
});
});
Как я могу изменить className внутри функции init()?
ПРИМЕЧАНИЕ:<span id='someID'></span> не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Ты можешь попробовать:
$("#someID").removeClass('modal-danger').addClass('modal-success');
SomeID должен быть идентификатором вашего диалога. Или, если у вас несколько или он динамический, вместо этого укажите имя класса.
$(".someClass").removeClass('modal-danger').addClass('modal-success');
Поскольку у вас есть ссылка на ваш диалог, примерно так должно работать, используя toggleClass:
callDialog.find('.modal-danger').toggleClass('modal-danger modal-success');
Это найдет дочерний элемент с классом modal-danger, а затем удалит его при добавлении класса modal-success.
Спасибо за ваш ответ. Я попробовал ваше решение, оно не помогло мне
can you please guide what to replace someID with? because the way i am creating the the dialog is different as it is shown in the question with no ID
Отвечая на ваш вопрос с комментарием, вы должны заменить его любым отдельным селектором, который у вас есть для элемента, который вы хотите изменить. Если это всего лишь один элемент, вы можете подумать о присвоении ему идентификатора. В зависимости от того, где вы вызываете это, вы можете определить свой селектор с помощью event.currentTarget, или, если в этот момент есть только этот элемент с этими классами "modal-danger nonumpad", вы также можете использовать его в качестве селектора.
Попробуй это:
$(callDialog).removeClass('modal-danger').addClass('modal-success');
$(callDialog) выбирает переменную, которой был назначен объект диалога загрузочного окна, и превращает ее в Объект JQuery.
.removeClass('modal-danger') - это JQuery метод для удаления класса, переданного в качестве параметра из выбранного объекта.
.addClass('modal-success') также является JQuery метод, используемым для добавления класса, переданного в качестве параметра выбранному объекту.
Пожалуйста, объясните свой код, чтобы его было легче понять.
не могли бы вы подсказать, чем заменить
someID? потому что способ, которым я создаю диалог, отличается, поскольку он показан в вопросе без идентификатора