帮我改变这个 JS/Jquery 函数来动态创建 Divs

Question

我已将代码上传到 JSfiddle：

http://jsfiddle.net/TSM_mac/pnQEe/

我想要能够在页面上的文本输入中输入内容，然后单击“添加 Div 类型”按钮，它将在您单击的 div 内附加（创建）div 元素（具有 class =“editable”） 。

我很难使这段代码正常工作。谁能找到我哪里出错了？

代码

var $currentInput = null;

$("#add_div1, #add_div2, #add_div3").click(function() {
    $currentInput = null;
    if ($currentInput == null) {
        $currentInput = $(this).prev();
        $("label").html($currentInput.attr("id"));
    }
});


var editid;
$("div.editable").click(function(e) {
    e.stopPropagation();
    if ($currentInput == null) return;
    editid = $(this).attr("id");
    var adddiv = GetElements();
    $(this).append(adddiv);
    $("label").html("");
});

function GetElements() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();

    if ($currentInput.attr("id") == "add_div1") return {
        "<div>"+value+"</div>"
    }
    if ($currentInput.attr("id") == "add_div2") return {
        "<div>"+value+"</div>"
    }
    if ($currentInput.attr("id") == "add_div3") return {
        "<div>"+value+"</div>"
    }
}

-

<input type="text" id="add-div1" value="Content of Div 1" />
<div id="add_div1">Add Div Type 1</div>
<input type="text" id="add-div1" value="Content of Div 2" />
<div id="add_div2">Add Div Type 2</div>
<input type="text" id="add-div1" value="Content of Div 3" />
<div id="add_div3">Add Div Type 3</div>



<div id="2" class="defaultclass editable">
    Add a Div Here
</div>
<div id="3" class="defaultclass editable">
     Add a Div Here
</div>
<div id="4" class="defaultclass editable">
    Add a Div Here
</div>

<label></label>

-

input { display: block; padding-top: 10px; }
#add_div1, #add_div2, #add_div3 { background: #c0c0c0; border: solid 1px #777; display: inline-block; }

.editable { border: solid 5px green; margin: 20px; background: blue; color: #fff; }

问候，

泰勒

Answer 1

这个现在可以工作

http://jsfiddle.net/pnQEe/5/

（我添加了一些 console.log 但现在已被注释掉）

似乎您的代码是您需要单击按钮，然后单击 div

问题 #1：您有 return { ... }应该是 { return ... } 或者只是 return ...

问题 #2：您有 add-div1 但代码针对 add_div1 检查（下划线，不是连字符）

另外，我也尽量不要让两个元素具有相同或相似的 id 名称。 （例如用于文本输入的 add-div1 和用于按钮的 add_div1 - 看起来太相似了。