Question

我需要你的帮助。

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

如何创建一个列表框，这样当项目突出显示时，我点击顶部的重命名按钮，带有li当前值的输入框将被放置在与该列表相同的位置。选择LI值，用户可以选择重命名li项。如果lisbox失去焦点，则会保存更改。类似的例子是Windows，当你点击＆＃34;重命名＆＃34;列表项成为用户重命名文件的输入框。我想模仿相同的功能并将其应用到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);
});

FIDDLE

如何使用jQuery重命名<ul>中的<li>？</ul> </li>

2 个答案: