Javascript 如何重命名<；李>；内部a<；ul>；使用jQuery？

我需要你的帮助

我在网络上找不到太多的参考资料（如果有的话），所以我求助于这个地方的大师和专家们的帮助

如何制作列表框，以便当项目高亮显示时，单击顶部的重命名按钮，具有li当前值的输入框将放置在与所选li值相同的位置，并且用户可以选择重命名li项目。如果lisbox失去焦点，则会保存更改。类似的示例是Windows，当您单击“重命名”时，列表项将成为用户重命名文件的输入框。我想模拟相同的功能，并将其应用于ulli列表框

为了让事情简单明了，我对jQuery很友好

这是一把小提琴：

HTML:

$（函数（）{
$（'li'）。单击（函数（）{
$（'li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
.主动{
背景色：rgb（128128）；
}
#颜色{
边框：1px实心#000；
宽度：100px；
列表样式：无；
保证金：0；
填充：2px；
}

红色的
绿色的
蓝色的
黄色的
橙色的
紫色的

我的解决方案临时将li作为输入，完成后将其替换回li

$（'li'）。单击（函数（）{
$（'li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（此）。替换为（“”）；
var val=$（'#change_me'）.val（）；
if（val）{
$（“#更改我”）。替换为（“
”+val+”
）；
}
});

这包括重命名按钮：

这正是您想要的：

$（'li'）。单击（函数（）{
$（'li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
var li=$（本）；
$（“#重命名”）。单击（函数（）{
$（li）。替换为（“”）；
$（“#改变我”）.focus（）；
setInterval（函数（）{
var val=$（“#更改我”）.val（）；
如果（！$（“#更改我”）是（“：焦点”））{
$（“#更改我”）。替换为（“
”+val+”
）；
}
}, 100);
});
});

我会这样做

var chosenValue;
var chosenIndex;
var newValue;

$('li').click(function(){

    $(this).addClass('active').siblings("li").removeClass('active');
    chosenValue = $(this).text();
    chosenIndex = $(this).index()+1;
    $(".rename").show().val(chosenValue);

});

$("input[type=button]").click(function(){
    newValue = $(".rename").val();
    $("li:nth-of-type("+chosenIndex+")").text(newValue);
});

---

A

ul

元素是一个“有序列表”，而不是列表框。“重命名”是什么意思？你的意思是“更改项目的文本？”

$（'this'）。text（'my text'）

类似的，是吗？--为用户提供一种取消方式，该方式将重置回原始值。此外，双击编辑也很好，如果选择了新元素，则取消活动编辑。此处未启用“在失去焦点时保存”，而是使用显式的“保存”按钮。输入保存，退出取消。谢谢。与其两次点击“重命名”按钮，是否可以在对象失去焦点后删除输入文本框（即用户点击UL框以外的其他位置）？绝对完美！我知道给猫剥皮的方法总是不止一种。

$('li').click(function(){

    $('li.active').removeClass('active');

    $(this).addClass('active');
    $(this).replaceWith('<input type="text" id="change_me">');
    var val = $('#change_me').val();
    if ( val ) {
        $('#change_me').replaceWith('<li>' + val + '</li>');
    }
});

    $('li').click(function(){

    $('li.active').removeClass('active');

    $(this).addClass('active');
    var li = $(this);
    $("#rename").click(function() {
        $(li).replaceWith('<input type="text" id="change_me">');
        $("#change_me").focus();
        setInterval(function(){
            var val = $("#change_me").val();
            if ( ! $("#change_me").is(":focus") ) {
                $('#change_me').replaceWith('<li>' + val + '</li>');
            }
        }, 100);
    });
});

var chosenValue;
var chosenIndex;
var newValue;

$('li').click(function(){

    $(this).addClass('active').siblings("li").removeClass('active');
    chosenValue = $(this).text();
    chosenIndex = $(this).index()+1;
    $(".rename").show().val(chosenValue);

});

$("input[type=button]").click(function(){
    newValue = $(".rename").val();
    $("li:nth-of-type("+chosenIndex+")").text(newValue);
});