JQuery Toggle属性contentEditable =“true”

我在div中使用contenteditable =“true”

每当我点击div时，我想要在这个属性上切换true和false。

例：

$( "#mylabel" ).click(function() { $('#editablediv').attr('contenteditable','false'); }); 

我试过了：

 $( "#mylabel" ).toggle(function() { $('#editablediv').attr('contenteditable','false'); }); 

但那没用

我怎样才能做到这一点？

Answer 1

试试这种方式：

 $( "#mylabel" ).click(function() { var value = $('#editablediv').attr('contenteditable'); if (value == 'false') { $('#editablediv').attr('contenteditable','true'); } else { $('#editablediv').attr('contenteditable','false'); } }); 

让我发布，希望这有帮助

Answer 2

这比您的最短（可重用性和字符数）短：

 function editTheElement() { var a = "contenteditable"; $(this).attr(a) === 'true' ? $(this).attr(a,'false') : $(this).attr(a, 'true'); } 

或者仍然

 function editTheElement(e) { var a = "contenteditable"; e.attr(a) === 'true' ? e.attr(a,'false') : e.attr(a, 'true'); } 

要么

 function editTheElement(e) { var a = 'contenteditable'; var v= e.attr(a); e.attr(a,!v); } 

要么

 function editTheElement(e) { var a = 'contenteditable'; e.attr(a,!e.attr(a)); } 

要么

 function editTheElement(e) { e.attr('contenteditable',!e.attr('contenteditable')); } 

JS很有趣:)

Answer 3

我发现最短的解决方案：

 $('[contenteditable]').attr('contenteditable') === 'true' ? $('[contenteditable]').attr('contenteditable', 'false') : $('[contenteditable]').attr('contenteditable', 'true'); 

Answer 4

 $('#mylabel').click(function() { editable = $('#editablediv').attr('contenteditable'); $('#editablediv').attr('contenteditable', !(editable == 'true')); }); 

Answer 5

至少在2018年，大多数答案都没有超过Chrome 68中的第一个开/关。这与jQuery或浏览器如何读取此属性的值有关，因为逻辑非常简单。

我发现的代码是

 var el = $("{your selector}") (el.attr('contenteditable') ? el.removeAttr('contenteditable') : el.attr('contenteditable', true)); 

演示小提琴