Onclick 创建输入并保存输入值答案

【问题标题】：Onclick create input and save input valueOnclick 创建输入并保存输入值
【发布时间】：2015-03-25 13:34:08
【问题描述】：

我有几个span，我想处理 onclick 事件。首先，我想在点击事件上创建一些元素。看起来像这样：

<div class="priceBox">
    Special Price:
    <input name="new-price" value="" />
</div>

然后用户输入一些数字，我想将input 值保存到被点击的span 元素的属性中。

<span name="1" data-price="input value" />

第二次点击span，input 会消失。

到目前为止，我已经设法在点击时创建和删除input。但是通过在input 内部单击（当我想输入时），会使input 消失，因为这是另一次单击。

也许来自 JSFiddle 的示例将有助于更好地理解我想要什么。 http://jsfiddle.net/0d17qp2L/

编辑：我已经更新了@Ryan 的答案并将其放到JSFiddle again。它好多了，但它仍然没有使用输入值创建data-price 属性。

【问题讨论】：

标签： jquery onclick

【解决方案1】：

我建议为您的 priceBox div 提供一个与单击的跨度名称相对应的唯一 ID，以便您可以切换它的可见性/存在性。

$('span-selector').click(function(e) {
    var span = $(this);
    var name = $(this).attr('name');
    var priceBox = $('div#priceBox'+ name);

    if ($(priceBox).length == 0) {
        priceBox = $('<div/>')
            .attr({'id':'priceBox'+name, 'class':'priceBox'})
            .text('Special Price: ')
            .append(
                $('<input/>')
                    .attr({'name':'new-price'})
                    .keyup(function(e) {
                        $(span).data({'price': $.trim($(this).val())});
                    })
            );
        $(span).append(priceBox);
    } else {
        $(priceBox).remove();
    }
});

您可能希望在输入框的 keyup 函数中添加一些数据验证，我没有这样做以防止在 span 标签的 data-price 属性中设置非数字值。

编辑

如果您需要查看源中的 data-price 属性，您可以更改以下行：

$(span).data({'price': $.trim($(this).val())});

用这一行：

$(span).attr({'data-price': $.trim($(this).val())});

【讨论】：

谢谢 :) 我稍微修改了你的代码（也缺少一些括号）。它有效，但我仍然看不到 data-price 属性。请查看编辑。
当以我使用 jQuery 的方式添加数据属性时，您将无法看到该属性，但您可以通过调用 $('span-selector').data( '价格'）;我已经修复了括号问题并添加到我的答案中，应该可以完成您评论的内容。

【解决方案2】：

不知道我是否理解这个问题，但我认为您应该将其添加到 this 的父级中。

如果你改变：

$(this).append(box);

收件人：

$(this).parent().append(box);

如果您单击它，该框不会消失，但如果您单击您的项目，它将消失。

这里是jsfiddle

希望对您有所帮助！ :)

【讨论】：

那很好:) 但是输入值应该保存到被点击的span的属性中。

【解决方案3】：

我认为这段代码会对你有所帮助

js代码

 <script type="text/javascript">
    $(document).ready(function(){
        var inp = $('<input/>');
        $(inp).attr('type','text');
        $("body").append(inp);
        $("span").click(function(){
            $(inp).toggle();
            if($(inp).is(":hidden"))
                {
                    $("p").html("value entered is "+$(inp).val());
                }
            else
                {
                    $(inp).val("");
                }
        });
    });
    </script>

html代码

<body>
<span>item1</span>
<span>item2</span>
<p></p>
</body>

【讨论】：