我想切换所有元素属性：
$('[contenteditable]').prop('contenteditable', !$(this).prop('contenteditable'));
它只会在第一次切换到true，但在第二次切换为false。怎么了？
更新FIDDLE
如上所述：它返回字符串，因此使用三元运算符可以解决方法：一行解决方案
$('#contenteditable1').attr('contenteditable',$(this).attr('contenteditable')==='true'?'false':'true' );
老=>
$('#contenteditable1').click(function()
{
if($('#contenteditable1').attr('contenteditable')==='true'){
//alert("true");
$('#contenteditable1').attr('contenteditable','false');
}
else{
$('#contenteditable1').attr('contenteditable','true');
}
});
使用prop()的回调函数
$('button').click(function() {
$('#contenteditable1').prop('contenteditable', function(i, val) {
return val == "false" ? true : false;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contenteditable1">hiu</div>
<button>click</button>变量“this”仅指功能块的上下文。您必须更改为选择所有元素并使用forEach切换所有值。
如果属性有多个值，我使用此代码切换所有属性值中的值：
// jquery toggle just the attribute value
$.fn.toggleAttributeVal = function (attr, val) {
var valArray = $(this).attr(attr).split(" ");
var elementIndex = valArray.indexOf(val);
if (elementIndex >= 0) {
valArray.splice(elementIndex, 1);
}
else {
valArray.splice(-1, 0, val);
}
$(this).attr(attr, valArray.join(" "));
return this;
};
示例用法（使用Font Awesome 5 JS版本）：
// jquery toggle just the attribute value
$.fn.toggleAttributeVal = function(attr, val) {
var valArray = $(this).attr(attr).split(" ");
var elementIndex = valArray.indexOf(val);
if (elementIndex >= 0) {
valArray.splice(elementIndex, 1);
} else {
valArray.splice(-1, 0, val);
}
$(this).attr(attr, valArray.join(" "));
return this;
};
$(document).ready(function() {
$("#btn1").click(function() {
$("#icon3 .fa-cog").toggleAttributeVal("data-fa-transform", "right-2");
});
});<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="fa-3x" id="icon3">
<span class="fa-layers fa-fw">
<i class="far fa-circle" data-fa-transform="grow-1"></i>
<i class="fas fa-cog" data-fa-transform="shrink-9 up-2 right-2"></i>
<i class="fas fa-arrow-left" data-fa-transform="shrink-9 down-2 left-2"></i>
</span>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary" id="btn1">toggle Attribute</button>
</div>
</div>
</body>
</div>