0

以前の質問で、テキストエリアと段落を切り替える方法について尋ねました。答えがわかりました。今、私はそれの反対をしたいと思っています。最初に、ハイパーリンクをクリックして、すでに非表示のテキストエリア + 2 つのボタンを表示していました。ボタンの1つをクリックすると、テキスト+ 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

0

要素を ID で参照することをお勧めします。

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

JSFiddle

ID を使用することの優れた点は、IDが一意であることが保証されclosest()ていることです。必要な要素を見つけるために使用する必要はありません。ただし、代わりにクラスを使用している場合は、closest()必要または役立つ場合があります。

于 2013-10-08T17:55:14.393 に答える