jquery - 使用 jquery 将列表项的一部分替换为来自表单的输入

Question

我正在尝试为我的菜单编辑器创建一个编辑功能。我得到了正确的值，将它们放在表单文本框中，然后尝试用新文本替换当前文本。

首先，用户点击“编辑”按钮，这个函数被调用:

$(".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>

Answer 1

假设显示的代码在同一个命名空间中(如果它不是全局的则加分 :))您可以通过简单地在该公共(public)命名空间中声明一个变量并在第一个处理程序中分配 jQuery 对象来做到这一点。

当用户现在点击编辑时，他们将被分配并且也可以在您的第二个处理程序中访问。

(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:你应该尽量避免pool jumping