Question

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

<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

我建议您给priceBox div一个唯一的ID，该ID与点击的span的名称相对应，以便您可以切换它的可见性/存在。

$('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();
    }
});

您可能希望在输入框的键盘功能中添加一些数据验证，我还没有这样做以防止在数据价格属性中设置非数字值。 span tag。

修改

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

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

这一行：

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

Answer 2

不知道我是否理解这个问题，但我认为你应该把它添加到这个问题的父母那里。

如果你改变：

$(this).append(box);

要：

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

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

以下是jsfiddle

我希望这有帮助！：）

Answer 3

我认为此代码可以帮助您

js code

 <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创建输入并保存输入值

3 个答案: