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切換布爾值。