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

Question

在我之前的问题中，我问过如何用段落切换文本区域。我得到了答案。现在我想做相反的事情。首先，我通过单击超链接显示已经隐藏的文本区域 + 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：

刚刚想出了一个解决方案。我可以使用$.siblings()函数来切换按钮旁边的元素。不过，还有更好的解决方案吗？

这是我想出的代码：

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

更新 2：

上面代码中的问题是，如果有多个这样的面板，那么代码就不起作用。我怎样才能解决这个问题？

Answer 1

您使用 Id 作为选择器 $("#cancel_edits"( 。id 选择器只返回第一个元素，所以如果有多个面板，它只对第一个元素起作用。

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

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

Answer 2

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

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

JSFiddle

使用

ID 的好处在于您可以保证它们是唯一的 - 无需使用 closest() 来查找所需的元素。但是，如果您改用类，则closest()可能是必要的或有帮助的。