jQuery切换属性值
[英]jQuery toggle attribute value
问题描述
I want to toggle all element attributes with: 
我想切换所有元素属性：
$('[contenteditable]').prop('contenteditable', !$(this).prop('contenteditable'));
It does only toggle to true the first time but not to false the second time. 它只会在第一次切换到true，但在第二次切换为false。 What is wrong? 怎么了？
4 个解决方案
解决方案1
6 2014-10-13 12:36:13
Use callback function with prop() 使用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>
解决方案2
4 已采纳 2014-10-13 12:48:47
As mentioned : it returns string so workaround is possible using ternary operator: One line solution 如上所述：它返回字符串，因此使用三元运算符可以解决方法：一行解决方案
$('#contenteditable1').attr('contenteditable',$(this).attr('contenteditable')==='true'?'false':'true' );
Old=> 老=>
$('#contenteditable1').click(function()
{
if($('#contenteditable1').attr('contenteditable')==='true'){
//alert("true");
$('#contenteditable1').attr('contenteditable','false');
}
else{
$('#contenteditable1').attr('contenteditable','true');
}
});
解决方案3
0 2014-10-13 12:38:27
The variable "this" only refers to the context of the function block. 变量“this”仅指功能块的上下文。 you must change to selecting all the elements and using a forEach to toggle all the values. 您必须更改为选择所有元素并使用forEach切换所有值。
解决方案4
0 2018-03-27 08:28:10
In case attribute has multiple values I use this code to toggle a value in all attribute values: 如果属性有多个值，我使用此代码切换所有属性值中的值：
// 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;
};
example usage (for using Font Awesome 5 JS version): 示例用法（使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.