jQuery切换功能即使参数为真也隐藏可见元素

Question

This question相似，但无济于事。

jQuery文档指示$.toggle function接受布尔参数：

该方法的第二个版本接受布尔参数。如果这参数为true，则显示匹配的元素；如果为假，则元素被隐藏。

但是，传递真实值（非布尔值）似乎没有被识别。即使$.toggle函数传递了真实值，下面的代码也会在显示/隐藏红色框之间交替显示。

为什么真值不起作用？

toggle

var imageURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAK8CAYAAABBSdyWAAAgAElEQVR4Ady9+bMcyXHn6ZWZdbwbaDSAvthNiocoiuRobU2/6P//ZW3X1mZNGo6GktjsE2gAD8c76q7Ktc/X41uZr/DQYLObnNEEUC8y4/Tw8PDw8PCIHPzmt//QRs9tBhFtm0H4g8FgF+vwqqrCv/V6rfh+ul2GP+FhsM387XYQbTuISlVXUdd11";

$(document).ready(function() {
   $(".box").on("click", function() {
     $("#redBox").toggle(imageURL);
     $("#curURL").text(imageURL);     
   });
});

.box {
  position: fixed;
  width: 200px;
  height: 200px;
  background: red;
  cursor: pointer;  
}

#redBox {
  background: red;
}

#blueBox {
  background: blue;
}

#curURL {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blueBox" class="box"></div>
<div id="redBox" class="box"></div>

<div id="curURL"></div>

Answer 1

该方法的第二个版本接受Boolean参数。

是的，这是严格的布尔类型检查。看到这里：Codepen Mirror

如果要根据https://github.com/jquery/jquery/blob/master/src/css/showHide.js#L86是否为空/未定义来进行切换，可以使用double bang运算符imageURL强制将其评估为布尔表达式，如下所示：

!!

您可以在此处阅读有关“ double NOT”的更多信息：$("#redBox").toggle(!!imageURL);

可以串联使用几个NOT运算符来显式强制将任何值转换为相应的布尔基元。

Answer 2

以及按照@MattU建议使用double not运算符（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT）-您也可以使用!! ..

Boolean(imageURL)

var imageURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAK8CAYAAABBSdyWAAAgAElEQVR4Ady9+bMcyXHn6ZWZdbwbaDSAvthNiocoiuRobU2/6P//ZW3X1mZNGo6GktjsE2gAD8c76q7Ktc/X41uZr/DQYLObnNEEUC8y4/Tw8PDw8PCIHPzmt//QRs9tBhFtm0H4g8FgF+vwqqrCv/V6rfh+ul2GP+FhsM387XYQbTuISlVXUdd11";

$(document).ready(function() {
   $(".box").on("click", function() {
     $("#redBox").toggle(Boolean(imageURL));
     $("#curURL").text(imageURL);     
   });
});

.box {
  position: fixed;
  width: 200px;
  height: 200px;
  background: red;
  cursor: pointer;  
}

#redBox {
  background: red;
}

#blueBox {
  background: blue;
}

#curURL {
  background: yellow;
}