如何重命名 <li> 里面 <ul> 使用jQuery吗？

Question

我需要你的帮助。

我在网上找不到太多参考资料（如果有的话），所以我转向这个地方的专家和专家的帮助。

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

为了使事情简单明了，我对jQuery友好。

这是一个小提琴： http : //jsfiddle.net/a4kg2612/

HTML：

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

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

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

        $(this).addClass('active');
    });



    });
</script>

<style type="text/css">
.active {
    background-color: rgb(128,128,128);
}
#colors {
    border: 1px solid #000;
    width: 100px;
    list-style: none;
    margin: 0;
    padding: 2px;
}

</style>

</head>

<body>

<input type="button" value="raname" onclick="renameLi()">
<ul id="colors">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>yellow</li>
    <li>orange</li>
    <li>purple</li>
</ul>


</body>

</html>

Answer 1

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

http://jsfiddle.net/a4kg2612/1/

$('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>');
    }
});

这包含了重命名按钮：

http://jsfiddle.net/a4kg2612/5/

这就是您想要的：

http://jsfiddle.net/a4kg2612/6/

    $('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);
    });
});

Answer 2

我会做这样的事情

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);
});

小提琴

如何重命名 <li> 里面 <ul> 使用jQuery吗？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-10-27 19:31:36

解决方案2
0 2014-10-27 19:35:13

如何重命名 <li> 里面 <ul> 使用jQuery吗？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-10-27 19:31:36

解决方案2 0 2014-10-27 19:35:13

解决方案1
1 已采纳 2014-10-27 19:31:36

解决方案2
0 2014-10-27 19:35:13