Question

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

至少在2018年，大多数这些答案都无法在Chrome 68中首次打开/关闭后起作用。这与jQuery或浏览器如何读取此属性的值有关，因为逻辑非常简单。 / p>

我发现可以使用的代码是

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

Demo Fiddle

Answer 4

我发现最短的解决方案：

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

Answer 5

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

JQuery Toggle属性contentEditable =＆＃34; true＆＃34;

5 个答案: