jquery - 切换内容可编辑属性

Question

为什么行 obj.attr(b, 'false').blur(); 不起作用？这里出了什么问题？

$('#btnren').on('click', function() {
  let obj = $('#cptitlea');
  let b = 'contenteditable';
  if (obj.attr(b, 'false')) {
    obj.attr(b, 'true').focus(); // this works
  } else {
    obj.attr(b, 'false').blur(); // doesn't work
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cptitlea'>323</div>
<br>
<button id='btnren'>CLICK</button>

Answer 1

问题是因为您在 if 语句中使用了 attr() 的setter。这意味着您的 if 实际上是在说“if(jQuery 对象存在)”，它始终为 true。

要解决此问题，请使用 attr() 的 getter 来检索值并在 if 语句中使用它。请注意，您可以通过向 attr() 提供一个函数来简化逻辑，该函数根据当前值返回要设置的新值。试试这个:

$('#btnren').on('click', function() {
  let $el = $('#cptitlea');
  let b = 'contenteditable';
  
  $el.attr(b, function(i, v) {
    return v === 'true' ? false : true;
  }).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cptitlea'>323</div>
<br>
<button id='btnren'>CLICK</button>