Question

我有两个div，每个都有一个链接。我正在尝试编写一个onclick函数，在两个div中的一个中添加一个新的div。新div将附加两个表单输入。新div将具有时间戳唯一ID标记。我吮吸javascript但无法弄清楚我做错了什么。

这是一个jsfiddle的链接，我试图用http://jsfiddle.net/XLuHU/6/

来处理它

<a href='javascript:void;' onclick='return add_item("xyz", "Candy", "45.99", "#item_box1")'>Add Item to Box 1</a>

<br>

<a href='javascript:void;' onclick='return add_item("123", "Soda", "1.99", "#item_box2")'>Add Item to Box 2</a><br><br>

<div id='item_box1'></div><br><br>
<div id='item_box2'></div>



function add_item(code, title, price, divbox){

    var idtag = "div_" + event.timeStamp;

    if(divbox == "#item_box1")
    {
      var item_title = $("<input/>", {
          type: 'text',
          name: "box1_item_title[]",
          value: title,
           });

       var item_price = $("<input/>", {
          type: 'text',
          name: "box1_item_price[]",
          value: price,
           });
       var new_item = item_title + " - " + item_price; 
    }
    else
    {
       var item_code = $("<input/>", {
          type: 'text',
          name: "box2_item_code[]",
          value: code,
           });

       var item_title = $("<input/>", {
          type: 'text',
          name: "box2_item_title[]",
          value: title,
           });
       var new_item = item_code + " - " + item_title; 

    }

    $(divbox).append("<div id='"+idtag+"' ></div>");

    $("#"+idtag).append(new_item);

};

Answer 1

首先，此行不正确，在此上下文中未定义事件：

var idtag = "div_" + event.timeStamp;

这可能会更好：

var idtag = "div_" + new Date().getTime();

此行也会产生错误的预期结果，因为您将两个对象一起添加：

var new_item = item_title + " - " + item_price;

此外，您的对象中还有逗号，这应该会导致JS错误，但在最新版本的Chrome和Firefox中似乎没有。

Here is the working fiddle，这是下面代码的轻微修改版本，因为'onclick =“return add_item ...'似乎在JSFiddle中不起作用。它只是给”add_item“是未定义。

但是，这样的东西应该在普通的HTML文档中起作用：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #item_box1{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid blue
            }

            #item_box2{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid red
            }
            .link-button {
                color: rgb(0, 0, 255);
                cursor: pointer
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
        <script type="text/javascript">
            function add_item( code, title, price, divbox )
            {
                var idtag, item_title, item_price, item_code;
                // Generate an id based on timestamp
                idtag = "div_" + new Date().getTime();
                // Generate a new div.
                $( divbox ).append( "<div id=\"" + idtag + "\"></div>" );

                if ( divbox == "#item_box1" )
                {
                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box1_item_title[]",
                        value: title
                    });

                    item_price = $("<input/>", {
                        type: 'text',
                        name: "box1_item_price[]",
                        value: price
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_title, item_price );
                }
                else
                {
                    item_code = $("<input/>", {
                        type: 'text',
                        name: "box2_item_code[]",
                        value: code
                    });

                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box2_item_title[]",
                        value: title
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_code, item_title );
                }
            }
        </script>
    </head>
    <body>
        <a class="link-button" onclick="return add_item('xyz', 'Candy', '45.99', '#item_box1');">Add Item to Box 1</a>
        <br>
        <a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
        <br>
        <br>
        <div id='item_box1'></div>
        <div id='item_box2'></div>

    </body>
</html>

通过javascript动态添加输入

1 个答案: