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

Question

在我的previous 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()。它也不起作用。

您可以在 fiddle 中找到标记。这是 fiddle .

更新 1:

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

这是我想出的代码:

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

更新 2:

上面代码中的问题在于，如果有多个面板，如 this然后代码不起作用。我该如何解决这个问题？

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();
});