如何使用 Javascript 和 JQuery 修改位于引导模式中的按钮的外观

Question

我有一个网页，它利用引导模式向用户显示信息，在其中一个模式中有一个按钮，为用户提供选择某些功能的能力。

在我的网页中，我有一个向外部 API 发出发布请求的函数，此 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');
}

Answer 1

如果，正如你所说，你正在使用jQuery -

function openTask(taskId) {
    $.post(http://localhost:1000/endpoint/, function (data) {
        if (data !== "Failed") {
            if (data.externalProvider === 1) {
                //Change button design here
                $('div.modal-footer button', '#EditTask').text([...your desired text...]);
            } else {
                //Keep button design the same
            }
        } else {
            alert("An error occured");
        }
    });
    $('#EditTask').modal('toggle');
}

Answer 2

您可以通过使用

JQuery 的 removeClass 删除类 "btn" 和 "btn-success" 来删除引导程序应用的 CSS 样式，然后使用 addClass 函数应用您想要的任何 css 样式：

$(".action-complete-task").removeClass("btn btn-success").addClass("newCSSStlying");

编辑：

通过删除它之前的类看起来很糟糕，所以，最好添加一个类来覆盖 css。

我会像这样：$(".action-complete-task").addClass("newCSSStlying");

Answer 3

我建议在你的按钮上添加一个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');