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＆gt; .editbutton

.parent＆gt; .button-wrap＆gt; .label容器

.parent＆gt; .section＆gt; .fields＆gt; .material_input

Answer 1

根据更新的问题，似乎在保存或取消按钮的点击处理程序中将$(this).parent()更改为$(this).parents('.parent')应解决此问题。

Answer 2

使用类而不是.css函数，可以在单击取消时删除类，或者如果有类，则可以添加更多函数

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

2 个答案: