0

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

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

这是我想出的代码：

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

更新 2：

上面代码中的问题是，如果有多个这样的面板，则代码不起作用。我该如何解决这个问题？

4

2 回答 2

2

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

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

$(".cancel_edits").on('click', function () {
    var elm=$(this);
    elm.add(elm.siblings("button,textarea")).hide();
    elm.siblings("p.content").show();
});
于 2013-10-08T18:12:14.967 回答
0

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

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

JSFiddle

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

于 2013-10-08T17:55:14.393 回答