Question

在我的previous question中，我询问如何使用段落切换textarea。我得到了答案。现在我想做与之相反的事情。首先，我通过点击超链接显示已经隐藏的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()。它还不起作用。

您可以在小提琴中找到标记。这是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 for selector $（“＃cancel_edits”）。 Id选择器仅返回第一个元素，因此如果有多个pannel，它将仅适用于第一个元素。

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

$(".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()可能是必要的或有用的。

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

2 个答案: