0

以前の投稿の 1 つからこれを取得した例があります。必要に応じてこれをアップグレードしようとしていますが、失敗しています。jquery と JavaScripts の知識が不足しているためだと思います。しかし、私はこれがひどく必要です。

これがjs fiddleのライブ デモです: http://jsfiddle.net/qzKWD/5/

私が今持っているもの：

ボタンがあることがわかります。ボタンをクリックすると、編集可能な入力を含む Div が開き、入力の名前を変更して保存できます。ボタンをクリックして多くの div を作成し、必要に応じて名前を変更できます。

私がやろうとしていること

私がやろうとしていたのは、そこに「X」テキストを追加したことです。「開始」ボタンをクリックすると、名前を変更するための入力で新しい div が作成され、この「X」テキストも使用されます。私が主に試みているのは..「X」テキストをクリックして入力でdivを削除できるdivがない場合、彼の入力の名前を変更する前です。つまり、「X」はその Div のクローズとして機能します。しかし、私はそれを行う方法を見つけていません。私の知識不足のせいかもしれません。解決策または方法があれば、それは優れています。

私のコード:

HTML 

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

CSS

    #createDiv, #results span { cursor: pointer; }
   #results div {
    background: #FFA;
    border: 1px solid;
   width:auto;
}
#results input[type=text] {
    border: none;
    display: none;
    outline: none;
}
.clickToCancleIcon{
float: right;

}

.new-folder{
height:30px; 
float:left;

 }

JS

    //  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 />", { name: "inpTitle[]",style:"display:block ;float:left; border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv),

            newSpan = $("<span />", { id: "myInstance2",style:"display:none; float:left;", text: "Unnamed Group", class: "title-span" }).appendTo(newDiv),


            clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).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();
        }
    });
})
4

1 に答える 1

1

次のコードを追加するだけで、

clickToCancle.click(function() {
   $(newDiv).remove(); 
});

後、

clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv);

または、次の方法でこれを行うことができます。

clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv).click(function() {
    $(newDiv).remove(); 
});

ライブデモを見る

于 2013-06-17T17:15:01.143 に答える