Jquery点击编辑

Question

我正在尝试编写一个 jquery 函数来使文本在点击时可编辑。

我正在尝试使用数据属性来查找 <p> 并根据用户单击的位置输入它应该显示和隐藏。

我已经在控制台记录了正确的数据属性，所以我不明白为什么它不会隐藏 <p> 然后显示 <input>

谁能看出这个函数有什么问题？

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

https://jsfiddle.net/jheimpeld2l/3oexm0m5/

Answer 1

试试这个：

$(document).ready(function() {
    
    $('p').click(function() {
        var input = $(this).attr("data-gradeid");
        console.log(input);
        // $('p').hide();
        $('p[data-gradeid='+ input + ']').hide(1000);
        $('input [data-gradeid='+ input +']').show();
        
  })
    
    $("input").keypress(function(event) {
    if (event.which == 13) {
      $(this).prev("p").show(1000).text($(this).val());
      $($(this)).hide();
    }
        
  })
    
})

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

        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

也许是 $('p [data-gradeid="'+ input + '"]') 周围的引号。

Answer 3

你不应该在选择器和它自己的属性之间留一个空格。

将'p [data-gradeid=' 替换为'p[data-gradeid='。

当您使用空格时，您是说带有data-gradeid 的某些元素是p 元素的子元素，但事实并非如此。

---

编辑：

您可以通过这种方式将enter 函数添加到 jQuery 库中：

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

这是working fiddle。

但是，我建议您使用 cmets 中所述的 blur 事件。