如何使用Javascript和JQuery修改位于引导模式内的按钮的外观？
如何使用Javascript和JQuery修改位于引导模式内的按钮的外观？
提问于 2019-01-15 14:34:00
我有一个网页，使用引导调制解调器向用户显示信息，其中一个调制解调器是一个按钮，提供用户选择某些功能的能力。
在我的网页中，我有一个向外部API发出post请求的函数，这个API返回一个数据集合。在此数据中有一个标志externalProvider，当此标志设置为1时，我希望更改按钮的文本和链接。所以按钮现在有了不同的行为。如果没有设置externalProvider标志，则按钮的行为和外观保持不变。
该按钮位于引导模式中，其代码如下所示。
HTML
<div class="modal fade bd-example-modal-lg" id="EditTask" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"> -snip- </div>
<div class="modal-body"> -snip- </div>
<div class="modal-footer">
<button type="button" class="btn btn-success action-complete-task">The button who's text I want to change</button>
</div>
</div>
</div>
</div>JS
function openTask(taskId) {
$.post(http://localhost:1000/endpoint/, function (data) {
if (data !== "Failed") {
if (data.externalProvider === 1) {
//Change button design here
} else {
//Keep button design the same
}
} else {
alert("An error occured");
}
});
$('#EditTask').modal('toggle');
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-15 14:40:35
我建议在按钮中添加一个id，以确保您只针对要更新的按钮，然后可以使用下面的更改注释来更新按钮文本。
$("#YOUR-ID").html('NEW TEXT');例如
HTML
<button id="action-complete-task" type="button" class="btn btn-success action-complete-task">The button who's text I want to change</button>JS
$("#action-complete-task").html('NEW TEXT');Stack Overflow用户
发布于 2019-01-15 14:39:47
您可以通过删除JQuery的removeClass中的类"btn“和"btn-success”来删除引导应用的CSS样式，然后使用addClass函数应用您想要的任何css样式：
$(".action-complete-task").removeClass("btn btn-success").addClass("newCSSStlying");编辑：
通过删除它之前拥有的类，这样看起来非常好，最好添加一个类来覆盖css。
我会说：$(".action-complete-task").addClass("newCSSStlying");
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54200993
复制相关文章
相似问题
腾讯云开发者
