代码之家 › 专栏 › 技术社区 › Crashalot

jQuery toggle函数隐藏可见元素,即使参数是truthy

css html jquery javascript

Crashalot · 技术社区 · 5 年前

This question 是相似的,但没有帮助。

jQuery文档表明 $.toggle function 接受布尔参数:

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

然而,传递truthy(非布尔)值似乎无法被识别。下面的代码交替显示/隐藏红色框,即使 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>

Codepen Mirror

2 回复 | 直到 5 年前

Matt Oestreich 5 年前

以及使用double not运算符( !! )正如@MattU建议的那样-您也可以使用 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;
}

<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>

Matt U 5 年前

方法的第二个版本接受 布尔型 参数。

是的,这是一个严格的布尔类型检查。请看这里: https://github.com/jquery/jquery/blob/master/src/css/showHide.js#L86

如果要根据是否 imageURL 是空的/未定义的,您可以使用double bang运算符强制它作为布尔表达式计算 !! 这样地:

$("#redBox").toggle(!!imageURL);

你可以在这里阅读更多关于“双不”的内容: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT

可以在序列中使用两个NOT运算符来显式强制将任何值转换为对应的布尔原语。