Javascript 用两个不同的元素切换一件事情

在我的演讲中，我问我如何用段落切换文本区域。我得到了答案。现在我想做相反的事情。首先，我通过点击超链接来显示已经隐藏的textarea+2按钮。现在，单击其中一个按钮，我想隐藏文本+2按钮，并显示第一个已经显示的段落

到目前为止，我已经尝试过这个JS，但它不起作用：

$(document).ready(function () {
    $(".no_link").click(function (e) {
        e.preventDefault();
    });
    $(".edit_offer").on('click', function () {
        toggleEditPanel($(this));
    });
    $("#cancel_edits").on('click', function () {
        $(this).closest("button").hide();
        $(this).closest("textarea").hide();
        $(this).closest("p.content").show();
    });
});

function toggleEditPanel(link) {
    link.parent().parent().parent().find("textarea").toggle();
    link.parent().parent().parent().find("button").toggle();
    link.parent().parent().parent().find("p.content").toggle();
}

但它不起作用。如何解决此错误

如果我试图再次调用函数

toggleEditPanel（）

。那么它也不起作用了

你可以在小提琴上找到标记。这是我的建议

更新1:

刚刚想出了一个解决办法。我可以使用

$.sibles（）

函数切换按钮旁边的元素。不过，还有更好的解决办法吗

下面是我想出的代码：

$("#cancel_edits").on('click', function () {
    $(this).hide();
    $(this).siblings("button").hide();
    $(this).siblings("textarea").hide();
    $(this).siblings("p.content").show();
});

更新2:

---

上述代码中的问题是，如果有多个类似的面板，则代码不起作用。我怎样才能解决这个问题呢？

我建议您通过ID引用元素：

$("#cancel_edits").on('click', function () {
    $('#save_edits').hide();
    $('#edited_content').hide();
    $(this).hide();
    $("p.content").show();
});

---

使用ID的好处是可以保证它们是唯一的—无需使用

closest（）

来查找所需的元素。但是，如果您使用的是类，

closest（）

可能是必要的或有用的。

您使用的是选择器$（“#取消_编辑”）的Id。 Id选择器只返回第一个元素，所以如果有多个窗格，它将只对第一个窗格有效

相反，给一些类名并将其用作选择器。此外，您还可以在代码中使用链接和缓存以获得更好的性能

$(".cancel_edits").on('click', function () {
    var elm=$(this);
    elm.add(elm.siblings("button,textarea")).hide();
    elm.siblings("p.content").show();
});

---

但是我认为当我在面板中添加更多元素时，使用

兄弟姐妹可以变得更具体，也更容易使用。兄弟姐妹也可以工作。但从你提供给我们的情况来看，ID同样可行
Sides（）
非常适用于不想按ID引用元素的情况，如果循环使用此代码，您似乎会这样做。如果有多个类似的面板，则您的代码和我的代码都不起作用。您能做一把小提琴吗？这里，我做了：。您的代码仍然不起作用：/对不起，小提琴有个错误。你的代码正在运行。谢谢。：）