单击创建输入并保存输入值

Question

我有几个 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 属性。

Answer 1

不知道我是否理解这个问题，但我认为你应该将它添加到这个的父项中。

如果你改变：

$(this).append(box);

收件人：

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

点击框不会消失，点击物品就会消失

这是jsfiddle

希望对您有所帮助！ :)

Answer 2

我建议为您的 priceBox div 提供一个与点击的跨度名称相对应的唯一 ID，以便您可以将其切换为 visibility/existence。

$('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 标记的数据价格属性中设置非数字值。

编辑

如果您需要查看源中的数据价格属性，您可以更改以下行：

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

这一行：

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

Answer 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>

单击创建输入并保存输入值

Onclick create input and save input value

jquery

onclick