Javascript：使用函数将变量更改为真/假

Question

我在我的函数中使用布尔 True/False 时遇到问题。

HTML：

<a onclick="selectCategory(animal);">Animal</a>
<a onclick="selectCategory(food);">Food</a>
<a onclick="selectCategory(thing);">Thing</a>

Javascript：

var animal = false;
var food = false;
var thing = false;

function selectCategory(category)
{
     if(category != true)
     {
          category = true;
     }
     else
     {
          category = false;
     }
}

例如，我希望此函数检查变量 "animal" 是否为false ，然后它应该变为true 。 如果为true ，则变为false 。

每当我尝试这个时，它总是变成true ，永远不会回到false 。 变量category似乎不会影响我的变量animal 、 food和thing 。 它只会将category更改为true就像它是一个新变量一样。

Answer 1

在 99% 的情况下，重新分配一个原语（或任何变量）本身不会做任何事情。 改用包含布尔值的对象，传递属性名称，然后在对象上重新分配属性：

 const obj = { animal: false, food: false, thing: false }; function selectCategory(category){ obj[category] = !obj[category]; console.log(obj); }

 <a onclick="selectCategory('animal');">Animal</a> <a onclick="selectCategory('food');">Food</a> <a onclick="selectCategory('thing');">Thing</a>

Answer 2

在这种情况下，您肯定必须返回，因为您所做的更改只是函数作用域的局部。 但是我的方法将是通过使用对象来使用小的更改的更好方法：

 var myConfig = { animal: false, food: false, thing: false }; function selectCategory(which) { myConfig[which] = !myConfig[which]; console.log(myConfig); }

 <a href="#" onclick="selectCategory('animal'); return false;">Animal</a> <a href="#" onclick="selectCategory('food'); return false;">Food</a> <a href="#" onclick="selectCategory('thing'); return false;">Thing</a>

要记住的几点：

• 使用对象不会污染全局范围。
• 您不能将变量作为参数传递，而您要在其中更改原始变量。 它是按值传递而不是引用。
• 使用return false并给出href以获得兼容性。
• 使用myVar = !myVar切换布尔值。