单击Jquery编辑

Question

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

我正在尝试使用数据attr来查找哪个<p>并根据用户点击的位置显示和隐藏输入。

我已经控制台记录了正确的数据attr，所以我看不出为什么它不会隐藏<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

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

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

这是working fiddle。

但是，我建议您使用blur事件，如评论中所述。

Answer 2

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

Answer 3

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;