Question

我有一个场景，最初可以看到一些标题。有一个“编辑”按钮。如果用户单击该按钮，该文本将转换为输入字段。该值应该是该标题。当用户键入任何内容并单击“更新”按钮时，应根据用户输入文本更改该标题。例如，

标题为“用户”和“编辑”按钮。当用户单击“编辑”按钮时，方案将如下更改：<input type="text" value="User">。并且“编辑”按钮将更改为“更新”按钮。当用户键入任何内容（即：Person）并单击“更新”按钮时，输入字段将消失，“更新”将再次更改为“编辑”。那么，将会有标题“人物”和“编辑”按钮。我试过这个。但是，由于我不擅长jQuery，我无法做到完美。请帮我正确地完成功能。 Here is my fiddle.

我认为，如果我可以修复此行，我的功能将是正确的：

$('.title-input').val($(this).parent().find('.title').text());

****************更新****************************** **

I can see a very similar question is posted at some minutes ago。在该解决方案中，可以采用每个标题来设置输入的初始值，如下所示：

columns.each(function(){

            var txt = $(this).text();
            var input = $('<input type="text">');
            input.val(txt);
            $(this).html(input);

        });

但是，我与桌子无关。那么，如何更正此行以设置输入字段的初始值？

$('.title-input').val($(this).parent().find('.title').text());

Answer 1

这里是working JSFiddle。

一些事情。

$("body").on('click', '.update', function() { 
    $('.title-input').keyup(function() {
     // ...

首先，每次单击“更新”按钮时，您都会为.title-input创建一个新的事件处理程序。这将在多次＆＃34;更新＆＃34;之后调用keyup函数数十亿次，但你只希望它被调用一次。您需要将其移出事件代理。

其次，您需要考虑$('.title-input').val($(this).parent().find('.title').text());正在做什么。 this在此范围内引用了什么？ “编辑”按钮 - 及其父级为body。因此，您要在body中找到所有带有标题类的元素，并将它们连接在一起，并将此值设置为每个标题。

要修复此问题（我对其进行了硬编码），我为每个title div提供了自己唯一的ID，以便该行一次定位一个特定标题。

$('#user').val($('#user').parent().find('.title').text());

如何将值设置为来自其他文本的输入字段，并根据用户输入更新文本

1 个答案: