3

メニュー エディターの編集機能を作成しようとしています。適切な値を取得してフォームのテキスト ボックスに配置し、現在のテキストを新しいテキストに置き換えようとしています。

まず、ユーザーが「編集」ボタンをクリックすると、次の関数が呼び出されます。

$(".edit").click(function(){
        $(this).addClass("editing");
        var menulink = $(this).next().find('a').attr('href');
        var menudisplay = $(this).next().find('a:first').text();
        $("#editlink").val(menulink);
        $("#editdisplay").val(menudisplay);
    });

次に、値が挿入されたフォームがポップアップ ボックスに表示されます。

<div id="edit-box" class="login-popup">
        <a href="#" class="close"><img src="../../../images/close5.png" class="btn_close" title="Close Window" alt="Close" /></a>
        Enter the link for the menu item: <input type="text" id="editlink" /><br />
        Enter the text to display: <input type="text" id="editdisplay" /><br />
        <button id="saveEdit">Save Menu Item</button>
    </div>

次に、ユーザーが保存ボタンをクリックすると、次の関数が呼び出されます。

$("#saveEdit").click(function(){
    var editlink = $("#editlink").val();
    var editdisplay = $("#editdisplay").val();
    **/* REPLACE THE CURRENT INFORMATION WITH THE NEW INFORMATION */**
    $('#mask, .login-popup').fadeOut(300 , function() {
        $(".edit").removeClass("editing");
        $('#mask').remove();  
    }); 
    $('.tree_item').each(function(){
        $(".delete, .edit").remove();
    });
    $.post('edit-menu-process.php', 
        {tree: $('#nav').html()}, 
        function(data){$("#printOut").html(data);}
    );
    alert("Menu item has been edited.");
    location.reload();
});

リスト項目の適切な部分を置き換えるのに問題があります。コードを作成する必要がある領域を太字にしました。この関数の残りの部分は、新しい値を取得し、マスクとクラスとボタンを取り除き、保存プロセスに投稿し、ページをリロードします。ガイダンスをいただければ幸いです。

リスト項目の例:

<li class="tree_item"><span><a href="index.php" class="menulink">Home</a></span></li>
4

2 に答える 2

0

示されているコードが同じ名前空間にあると仮定すると (グローバルなものでない場合はボーナスポイント:))、その共通の名前空間で変数を宣言し、最初のハンドラーで jQuery オブジェクトを割り当てるだけでこれを行うことができます。

ユーザーが編集をクリックすると、ユーザーが割り当てられ、2 番目のハンドラーでもアクセスできるようになります。

(function ($, window, undefined) {
    var $link;

    $(".edit").click(function(){
        var $this = $(this);

        $link = $this.next().find('a:first').attr('href');
        var menulink    = $link.attr('href');
        var menudisplay = $link.text();

        $this.addClass("editing");

        $("#editlink").val(menulink);
        $("#editdisplay").val(menudisplay);
    });

    $("#saveEdit").click(function(){
        var editlink = $("#editlink").val();
        var editdisplay = $("#editdisplay").val();

        // Update href attr and text of your link
        $link.attr('href', editlink);
        $link.text(editdisplay);

        $('#mask, .login-popup').fadeOut(300 , function() {
            $(".edit").removeClass("editing");
            $('#mask').remove();  
        }); 
        $('.tree_item').each(function(){
            $(".delete, .edit").remove();
        });
        $.post('edit-menu-process.php', 
            {tree: $('#nav').html()}, 
            function(data){$("#printOut").html(data);}
        );
        alert("Menu item has been edited.");
        location.reload();
    });
}(jQuery, this))

OT:プールでのジャンプは避けるようにしてください。

于 2013-07-07T21:02:01.697 に答える
0

私はそれを機能させる方法を理解することができました。.textタグ間のすべてを消去するように見えるのでli、変数を使用してすべてを置き換えることができます。 $(".editing").next().text('<span><a href="'+editlink+'" class="menulink">'+editdisplay+'</a></span>');

于 2013-07-07T20:55:43.907 に答える