使用 jquery 用表单的输入替换列表项的一部分答案

【问题标题】：Replacing parts of a list item with inputs from a form using jquery使用 jquery 用表单的输入替换列表项的一部分
【发布时间】：2013-07-05 03:51:23
【问题描述】：

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

首先，用户点击“编辑”按钮并调用此函数：

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

【问题讨论】：

标签： jquery html list replace

【解决方案1】：

假设显示的代码在同一个命名空间中（如果它不是全局的，则加分：））您可以通过简单地在该公共命名空间中声明一个变量并在第一个处理程序中分配 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

【讨论】：

只是一个澄清问题：为什么$link 和menulink（以及更新href 时）有.attr。是否有理由将它放在两个地方，或者它就是这样工作的？这种方式与我在上面发布的方式相比有什么更好的地方？
这些都在document.ready(function(){中。我想另一个问题是我的和你的有什么区别？很多问题。我很抱歉。
menulink 没有 .attr, it only contains the value from $link's href attribute. With the $()` 函数，您将获得对您正在访问的 HTML 节点的引用，该 HTML 节点包含在一个 jQuery 对象中，即 jQuery对象提供了.attr 方法。

【解决方案2】：

我已经能够找到一种方法来让它发挥作用。由于.text 似乎删除了li 标签之间的所有内容，因此我可以使用变量替换所有内容。 $(".editing").next().text('<span><a href="'+editlink+'" class="menulink">'+editdisplay+'</a></span>');

【讨论】：