Question

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

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

<button aria-checked="false" class="toggle-search" type="button">
    Toggle button is <span>false</span>
</button>

现在是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"。

＆＃13;

$(".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");

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button aria-checked="false" class="toggle-search" type="button">
    Toggle button is <span>false</span>
</button>

＆＃13;

Answer 2

var status = !$(this).attr("aria-checked");这不会将字符串转换为bool。所以用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());
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button aria-checked="false" class="toggle-search" type="button">
  Toggle button is <span>false</span>
</button>

在Javascript中切换bool值

2 个答案: