Jquery编辑点击

我想写一个jQuery的功能，使文本编辑点击。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/

来源

2016-09-22 jdheimpel

记住[接受]（http://meta.stackexchange.com/a/5235/321253）的作品出来给你答案。随时提出新的问题。 –

你不应该给一个选择和自己的属性之间的空间。

用'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。

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

来源

2016-09-22 22:08:36

谢谢！这似乎工作。但是，现在输入时保存值的第二个函数并不是。我更新了小提琴：https://jsfiddle.net/jheimpeld2l/se5zgjya/ – jdheimpel

很高兴看到它的工作:)你也可以看看[CSS参考]（http://www.w3schools.com/ cssref/css_selectors.asp）。 –

我已将函数改写为[在此]（https://jsfiddle.net/se5zgjya/1/）。希望能帮助到你。 –

也许引号$('p [data-gradeid="'+ input + '"]')左右。

来源

2016-09-22 22:12:25

试试这个：

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

来源

2016-09-22 22:15:08 Ehsan

Jquery编辑点击

回答

相关问题