2

我是 Javascript 和 jQuery 的新手。我需要一些帮助，例如：

<script type="text/javascript">
    $(window).load(function(){
        $('#createDiv').click(function (){
            $("<div/>").html("<span id='myInstance2' style='display: block;'>New Folder</span>").css("display", "none").appendTo("#results").fadeIn();
        });
    });
</script>

我有这个功能可以点击并创建一个<span>带有文本的新标签。你可以看到我有一个ID myInstance2。所以我想做的是当我点击并创建跨度时，我想让这个跨度可以实时编辑。就像我可以将此“新文件夹”重命名为我想要的任何内容。

如果有人可以提供帮助，那就太好了。提前感谢，对不起我的英语不好:)

4

3 回答 3

2

如果我抓住了我认为您正在尝试做的事情，那么您想象的方式并不完全可行。不过，也有窍门。以下是其中之一。这个想法是在跨度所在的位置插入一个“隐藏”输入，然后创建函数来显示输入并在需要时隐藏跨度（例如当用户单击跨度时。像这样：

jsFiddle

HTML

<button id="createDiv">Start</button>
<div id="results"></div>

CSS

#createDiv, #results span { cursor: pointer; }
#results div {
    background: #FFA;
    border: 1px solid;
    margin: 1em;
    padding: 1em 1em 2em;
}
#results input[type=text] {
    border: none;
    display: none;
    outline: none;
}

JavaScript

//  Call for document .onload event
$(function() {
    //  Normal Click event asignement, same as $("#createDiv").click(function
    $("#createDiv").on("click", function(e) {
        //  Simply creating the elements one by one to remove confusion
        var newDiv = $("<div />", { class: "new-folder" }),  //  Notice, each child variable is appended to parent
            newInp = $("<input />", { type: "text", value: "New Folder", class: "title-inp" }).appendTo(newDiv),
            newSpan = $("<span />", { id: "myInstance2", text: "New Folder", class: "title-span" }).appendTo(newDiv);
        //  Everything created and seated, let's append this new div to it's parent
        $("#results").append(newDiv);
    });

    //  the following use the ".delegate" side of .on
    //  This means that ALL future created elements with the same classname, 
    //    inside the same parent will have this same event function added
    $("#results").on("click", ".new-folder .title-span", function(e) {
        //  This hides our span as it was clicked on and shows our trick input, 
        //    also places focus on input
        $(this).hide().prev().show().focus();
    });
    $("#results").on("blur", ".new-folder .title-inp", function(e) {
        //  tells the browser, when user clicks away from input, hide input and show span
        //    also replaces text in span with new text in input
        $(this).hide().next().text($(this).val()).show();
    });
    //  The following sures we get the same functionality from blur on Enter key being pressed
    $("#results").on("keyup", ".new-folder .title-inp", function(e) {
        //  Here we grab the key code for the "Enter" key
        var eKey = e.which || e.keyCode;
        if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
            $(this).hide().next().text($(this).val()).show();
        }
    });
})
于 2013-05-06T15:58:19.900 回答
1

您可以做的是在 span 所在的封闭静态元素上放置一个委托事件处理程序#results。处理程序将隐藏span并显示input. 我不太了解您的代码，但您可能希望使用 idinput而不是跨度。你没有说你想从可编辑回到“只读”，所以我没有这样做。

演示

    $('#createDiv').on('click', function () {
        var str = "Click here to edit it";  // New Folder
        $("<div/>").html("<span id='myInstance2' class='editToggler' style='display: block;'>" + str + "</span><input class='editToggler' style='display: none' value='" + str + "'/>").appendTo("#results").fadeIn();
        $(this).off('click');
    });



    $('#results').on('click', 'span', function () {
        $('.editToggler').toggle();
    });
于 2013-05-06T15:56:24.840 回答
0

这应该有效并且比其他答案（imo）简单得多：

<script type="text/javascript">
  $(window).load(function(){
      $('#createDiv').click(function (){
        $("<div />").html("<span onclick='$(this).html(prompt(\"Rename \"+$(this).html()))' id='myInstance2' style='display: block; cursor:pointer;'>New Folder</span>").css("display", "none").appendTo("#results").fadeIn();
      });
  });
</script>

当您单击您的span时，系统将提示您输入其新名称。为了直观地表示您创建的span是可点击的，我还添加cursor:pointer了span.

演示：http: //jsfiddle.net/XJ6Cn/

span编辑： PS：您是否使用这种方法创建多个？如果是这样，您应该id动态创建 s，因为ids 是唯一的。如果您希望所有spans 的字符串都相同，则可以将其设置为 a class。

于 2013-05-06T16:19:17.737 回答