在Javascript中切换bool值

这是一个奇怪的问题：我有一个只有true或false的HTML属性，我用Jquery获取它并将其转换为布尔值，然后我将其切换为相反的（true为false，false为true），然后我使用新的布尔值更改相同的HTML属性。

它首先工作，当原始attr值为false并且设置为true时，但不是相反：

 Toggle button is false  

现在是Js / Jquery

 $(".toggle-search").click(function(){ var status = !$(this).attr("aria-checked"); // returns string, turn to bool $(this).attr("aria-checked",!status); $(this).children("span").html(!status); }); 

https://jsfiddle.net/kaqyhc48/4/

我不明白逻辑是怎么回事，新值是不是被解析为false，或者可能首先被解析为false然后被转换为true？

谢谢您的帮助

Answer 1

您必须将字符串解析为布尔值。 最简单的方法是value == "true" ，当字符串为"true"时返回true ，否则返回false 。

要将其解析回字符串，您可以使用value ? "true" : "false" value ? "true" : "false" 。

 $(".toggle-search").click(function() { var status = $(this).attr("aria-checked") == "true"; status = !status; // returns string, turn to bool $(this).attr("aria-checked", status); $(this).children("span").html(status ? "true" : "false"); }); 

   Toggle button is false  

Answer 2

var status = !$(this).attr("aria-checked"); 这不会将字符串转换为bool。 所以用var status = 'true'== $(this).attr("aria-checked");替换它var status = 'true'== $(this).attr("aria-checked"); 这会将字符串转换为bool。

并且.html(false)将不会打印，因此请使用.html((false).toString())

 $(".toggle-search").click(function(){ var status = 'true'== $(this).attr("aria-checked"); $(this).attr("aria-checked",!status); $(this).children("span").html((!status).toString()); }); 

   Toggle button is false