Javascript 通过单击两个单独的按钮更改css两次？

我有一个界面，你可以按编辑来显示边框和改变其他div的背景色。“编辑”按钮将替换为“取消”和“保存”按钮。我希望边框和背景在单击“编辑”时更改，并在单击“保存”或“取消”时恢复为正常

我可以在单击“编辑”时更改div，但无法在单击“取消”或“保存”时重新更改div。我对这两个函数使用完全相同的Jquery函数

//show lines on clicking edit
$(".editbutton").click(function() {
    $(this).parent().find(".material_input").css("border-bottom", "1px solid #ccc").css("background-color", "#fafafa");
});

//hide lines on clicking save or cancel
$(".label-container button").click(function() {
    $(this).parent().find(".material_input").css("background-color", "#fff");
});

我知道我的第二个不包括边界。我只是想先把背景恢复成白色

编辑：看起来第二个函数访问DOM有问题，因为我可以在Codepen中轻松地完成这项工作。如果有人能帮我解决这件事，那就太好了

以下是相关类的DOM：

.parent>.edit按钮

.parent>.button wrap>.label容器

---

.parent>.section>.fields>.material\u input

改用class.css函数，您可以在单击“取消”时删除类，或者添加更多函数（如果有类）

，根据更新的问题，似乎将

$（this）.parent（）

更改为

$（this）.parents（'.parent'））

在保存或取消按钮的单击处理程序中应该可以解决这个问题。

如果我理解正确，您希望隐藏底部边框，只需添加.css（'border-bottom'，'none'）；与其说是答案，不如说是建议，但我建议在jQuery中使用

toggleClass

，在单击按钮时在元素上添加/删除类。示例：@KrisJones你可以发布html或代码笔的链接吗。