javascript - 单击两个单独的按钮两次更改 css？

Question

我有一个界面，您可以按编辑键调出边框并更改其他 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 > .editbutton

.parent > .button-wrap > .label-container

.parent > .section > .fields > .material_input

Answer 1

根据更新后的问题，似乎将 $(this).parent() 更改为 $(this).parents('.parent') inside the click保存或取消按钮的处理程序应该可以解决这个问题。