Jquery单击即编辑

我正在尝试编写一个jquery函数，使文本在单击时可编辑

我正在尝试使用数据属性来查找哪个

，并根据用户单击的位置输入它应该显示和隐藏的内容

我已将正确的数据属性记录在控制台中，因此我不明白为什么它不会隐藏

，然后显示

有人能看到这个函数有什么问题吗

     <p class="editbox" data-gradeid="1">Original text</p>
<input data-gradeid="1">

<p class="editbox" data-gradeid="2">Original text</p>
<input data-gradeid="2"> 


$('p').click(function() {
        var input = $(this).attr("data-gradeid");
        console.log(input);
        // $('p').hide();
        $('p [data-gradeid='+ input + ']').hide();
        $('input [data-gradeid='+ input +']').show();
  });.

原始文本

原始文本

$（'p'）。单击（函数（）{ 变量输入=$（this.attr（“数据等级ID”）； 控制台日志（输入）； //$（'p'）.hide（）； $（'p[datagradeid='+input+']'）。hide（）； $（'input[data gradeid='+input+']'）。show（）； });.

---

选择器与其自身属性之间不应留空格

将

'p[data gradeid=”

替换为

'p[data gradeid=”

当您使用空格时，您是说具有

data gradeid

的某个元素是

p

元素的子元素，但事实并非如此

---

编辑：

您可以通过以下方式向jQuery库添加

enter

函数：

$.fn.enter = function(fx) {
    $(this).keypress(function(e) {
        e.keyCode === 13 && fx.apply(this);
    });
};

然后，为了寻找性能，您可以使用

$。each（）

并存储每个

$p

和

$input

元素，以避免进一步的DOM处理：

$('p[data-gradeid]').each(function() {
    var $p = $(this);
    var gradeid = $p.data('gradeid');
    var $input = $('input[data-gradeid=' + gradeid + ']');

    $p.click(function() {
        $p.hide();
        $input.val($p.html()).show().focus();
    });

    $input.enter(function() {
        $input.hide();
        $p.html($input.val()).show();
    });
});

这是一本书

---

但是，我建议您使用注释中提到的

blur

事件。

您不应在选择器与其自身属性之间留出空格

将

'p[data gradeid=”

替换为

'p[data gradeid=”

当您使用空格时，您是说具有

data gradeid

的某个元素是

p

元素的子元素，但事实并非如此

---

编辑：

您可以通过以下方式向jQuery库添加

enter

函数：

$.fn.enter = function(fx) {
    $(this).keypress(function(e) {
        e.keyCode === 13 && fx.apply(this);
    });
};

然后，为了寻找性能，您可以使用

$。each（）

并存储每个

$p

和

$input

元素，以避免进一步的DOM处理：

$('p[data-gradeid]').each(function() {
    var $p = $(this);
    var gradeid = $p.data('gradeid');
    var $input = $('input[data-gradeid=' + gradeid + ']');

    $p.click(function() {
        $p.hide();
        $input.val($p.html()).show().focus();
    });

    $input.enter(function() {
        $input.hide();
        $p.html($input.val()).show();
    });
});

这是一本书

---

但是，我建议您使用注释中提到的

blur

事件。

可能是

$（'p[data gradeid=“'+input+'”）

可能是

$（'p[data gradeid=“'+input+'”）

尝试以下方法：

$（文档）.ready（函数（）{
$（'p'）。单击（函数（）{
变量输入=$（this.attr（“数据等级ID”）；
控制台日志（输入）；
//$（'p'）.hide（）；
$（'p[datagradeid='+input+']'）。隐藏（1000）；
$（'input[data gradeid='+input+']'）。show（）；
})
$（“输入”）。按键（功能（事件）{
if（event.which==13）{
$（this.prev（“p”）.show（1000）.text（$（this.val（））；
$（$（this））.hide（）；
}
})
})

原始文本

原始文本

试试这个：

$（文档）.ready（函数（）{
$（'p'）。单击（函数（）{
变量输入=$（this.attr（“数据等级ID”）；
控制台日志（输入）；
//$（'p'）.hide（）；
$（'p[datagradeid='+input+']'）。隐藏（1000）；
$（'input[data gradeid='+input+']'）。show（）；
})
$（“输入”）。按键（功能（事件）{
if（event.which==13）{
$（this.prev（“p”）.show（1000）.text（$（this.val（））；
$（$（this））.hide（）；
}
})
})

原始文本

原始文本

---

谢谢！这似乎很有效。但是，现在输入时保存值的第二个函数不起作用。我已经更新了小提琴：很高兴看到它起作用：）你也可以看看。我已经重写了这些函数。希望它能帮到你。你明白为什么按键功能在第二部分不起作用了吗。我假设是same问题，但当我更新你的建议时，它不起作用。我认为

keypress

不适合处理你的需求，请查看我在上一篇评论中发布的链接。谢谢！这似乎起作用。但是，现在输入时保存值的第二个功能不起作用。我更新了小提琴：很高兴看到它起作用：）你a还可以看一下。我已经为您重写了函数。希望能有所帮助。您知道为什么在本文的第二部分中按键功能不起作用了吗。我认为这是同一个问题，但当我更新了您的建议后，它就不起作用了。我认为

keypress

不是处理您需求的正确事件，请看我发布的链接在我之前的评论中。记住对你有用的答案。自由地问新问题。记住对你有用的答案。自由地问新问题。