Question

我无法切换属性contenteditable。默认情况下，我已在HTML代码中将其硬编码到false，当我点击#edit-button时，它会转到false。但是当我再次点击它时，没有任何反应。似乎永远不会触发else - 部分。

我也试图禁用每一个a/button href，但我在这件事上也没有成功。下面的if语句是错误的吗？

if ( $(this).is(':button') ) {
    $(this).attr('href', '#');
}

jQuery的：

$('#edit-button').on('click', function() {
    $('section').each(function() {
        $(this).find('[contenteditable]').each(function() {
            if ( $(this).attr('contenteditable', false) ) {
                $(this).attr('contenteditable', true);
                $('#header').focus();
                if ( $(this).is(':button') ) {
                    $(this).attr('href', '#');
                }
            } else {
                $(this).attr('contenteditable', false);
            }
        });
    });
});

尝试搜索SO但Google和Google没有运气。

感谢您的帮助。

Answer 1

您需要使用removeAttr函数。

$(this).removeAttr('contenteditable');

**instead of**

$(this).attr('contenteditable', false);

在检查属性时。您可以使用

var attr = $(this).attr('contenteditable');
if (typeof attr !== typeof undefined && attr !== false) {
  // Your existing code.
}

instead of 

if ( $(this).attr('contenteditable', false) ) {

//您的完整代码如下：

$('#edit-button').on('click', function() {
   $('section').each(function() {
    $(this).find('[contenteditable]').each(function() {
        var attr = $(this).attr('contenteditable');
        if (typeof attr !== typeof undefined && attr !== false) {
            $(this).attr('contenteditable', true);
            $('#header').focus();
            if ( $(this).is(':button') ) {
                $(this).attr('href', '#');
            }
        } else {
            $(this).removeAttr('contenteditable');
        }
    });
  });
});

Answer 2

我认为使用 contenteditable 你必须将“true”和“false”设置为字符串。不像其他可以为空的属性。尝试设置

$(this).attr('contenteditable', 'true');

和 $（this）.attr（'contenteditable'，'false'）;

不是100％它对所有浏览器来说都是一样的，但要试一试！

Answer 3

这就是我所做的：

<div contenteditable="true">The quick brown fox...</div>
<br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<br/>
<button class="disableToggle">Button</button>
<br/>
<button class="disableToggle">Button</button>
<br/>
<button class="disableToggle">Button</button>
<br/>
<br/>
<br/>
<button id="toggle">Toggle Edit</button>

$("#toggle").click(function () {
    if ($("div").attr("contenteditable") == "true") {
        $("div").attr("contenteditable", "false");
        $(".disableToggle").attr("disabled", "true");
        $("a").on("click", function(e){e.preventDefault();});
    } else {
        $("div").attr("contenteditable", "true");
        $(".disableToggle").removeAttr("disabled");
        $("a").off("click");
    }
});

Here is the JSFiddle demo

jQuery没有在click上切换contenteditable并且a / href没有被禁用

3 个答案: