再次单击相同按钮时更改文本按钮的功能会变回

Question

正如标题所说，如果我点击这两个按钮，它们会从“添加”变为“更新”，但如果我点击完全相同的按钮，它们就会变回来。

我的意图是如果单击来自“添加”的编辑按钮，则目标其他按钮从添加切换到更新，如果我再次单击它需要保持在“更新”。

添加按钮和功能：

  <button id="createNewCategory" type="submit" class="btn btn-outline-secondary" data-toggle="modal" data-target="#categoryModal"><i class="fas fa-plus-circle " aria-hidden="true"></i> New Category</button>

  $(document).on('click', '#createNewCategory', function(){
    $("#save_button_span").html($("#save_button_span").html() === " Update" ? " Add" : " Update");
});

更新按钮和功能：

  <button type="button" class="btn btn-primary save"><i class="fas fa-save" aria-hidden="true"></i><span id="save_button_span"> Add</span></button>

  $(document).on('click','.edit_group',function () {
            $("#save_button_span").html($("#save_button_span").html() === " Add" ? " Update" : " Add");

});

为了解决我的问题，我应该在这两种情况下进行哪些更改？

$("#save_button_span").html($("#save_button_span").html() === " Update" ? " Add" : " Update");

屏幕截图，我两次都点击“新类别”，如果我这样做，按钮需要保持为“添加”。

Answer 1

你做的事情太复杂了。您正在使用甚至不需要的逻辑。只是将您的代码更改为：

添加按钮和功能：

<button type="button" class="btn btn-primary save"><i class="fas fa-save" aria-hidden="true"></i><span id="save_button_span"> Add</span></button>

$(document).on('click','.edit_group',function () {
            $("#save_button_span").text('Add');

});

更新按钮和功能：

<button type="button" class="btn btn-primary save"><i class="fas fa-save" aria-hidden="true"></i><span id="save_button_span"> Add</span></button>

$(document).on('click','.edit_group',function () {
            $("#save_button_span").text('Update');

});