在Javascript/jQuery中切换而不使用全局变量的合适方法？

通常，当我编写一个切换函数（例如在两种背景色之间切换）时，我使用一个全局变量作为标志。比如像这样-

var标志=true；
函数更改（）
{
国际单项体育联合会（旗）
{
document.getElementById（“box”）.style.backgroundColor=“蓝色”；
flag=false；
}
其他的
{
document.getElementById（“box”）.style.backgroundColor=“红色”；
flag=true；
}
}

#框
{
宽度：100px；
高度：100px；
背景色：红色；
}

单击要切换的框

您可以检查background color属性，然后执行与此相反的操作，如下所示：

 if(document.getElementById("box").style.backgroundColor == "red")
 {
      document.getElementById("box").style.backgroundColor = "blue";
 }
 else
 {
      document.getElementById("box").style.backgroundColor = "red";
 }

---

如果您有两个以上的选项，只需添加elseif语句…

您可以通过使用addEventListener结合自动执行匿名函数绑定到click事件来完成此操作

（函数（）{
var标志=真；
document.getElementById（'box'）。addEventListener（'click'，function（）{
this.style.backgroundColor=旗帜？“蓝色”：“红色”；
flag=！flag；
});
})();
#框
{
宽度：100px；
高度：100px；
背景色：红色；
}
单击要切换的框
您可以使用立即调用的函数表达式（IIFE）来避免变量名污染全局范围。匿名IIFE的示例如下所示：

(function(){
var flag = true;
function change()
{
  if(flag)
  {
      document.getElementById("box").style.backgroundColor = "blue";
      flag = false;
  }
  else
    {
      document.getElementById("box").style.backgroundColor = "red";
      flag = true;
    }
}

}());

通过将代码包装到函数中，您已经创建了另一个级别的作用域，并保留了全局空间。是一篇关于它的文章，但如果您只需键入搜索引擎“iLife”，就可以找到很多文章。
您可以为页面/站点创建一个模块对象，如下所示：

HTML

<h3>Click the box to toggle</h3>
<div id="box" onclick="MyModule.change(this)">Change Color</div>

jsidle:
jQuery的方法正是为了这个目的而存在的：


$（'.box'）。单击（函数（）{
$（this.toggleClass（'blue'）；
});
.box{
宽度：100px；
高度：100px；
背景色：红色；
显示：内联块；
利润率：10px；
}
.盒子.蓝色{
背景颜色：蓝色；
}

单击要切换的框
您应该将全局变量放入该项目的命名空间中。所以，如果你使用了很多变量，而不是：var x，y，z；do:var MyVars={x:xvar，y:yvar，z:zvar}这样可以保留全局变量，但它们是在名称空间下组织的。然后访问它们，MyVar.x、MyVar.y等等。除了名称空间方法（），您可以简单地使用一个自调用匿名函数，它将在其中定义的任何变量封装到该范围，而不是全局变量。然而，根据您的用例，可能有人可以提供更好的方法。请举例说明“切换各种属性”的含义？请使用jQuery.data（）-而不是globals@Daved：我所说的各种属性是指1个全局变量来切换字体大小属性，第2个全局变量来切换宽度，等等@NomNom99切换时，对于其中任何一个，样式的设置是否足够使您可以利用CSS类而不是元素上的样式？由于您使用的是jQuery，如果是这种情况，您确实可以简化事情。不幸的是，
change
在包含函数true的外部将不可见，但是如果整个文件都包装在一个iLife中，那么您至少可以将所有内容都排除在全局范围之外。@Igor:我们希望避免污染全局范围，不是吗？因此，我们也不会使
改变
成为全球性的。只需执行
document.getElementById（“box”）.onclick=change在该IIFE中，而不是使用内联事件属性。因为他使用的是jQuery，所以我只需要利用库的.click（）处理程序。顺便说一句，我是根据OP上的jQuery标记而不是他的代码示例来评论的，它没有显示jQuery。没有理由创建一个对象，你可以只返回函数本身。这可以用于切换2个状态，但是如果状态超过2个呢？
var MyModule = (function(){
    var boxFlag = true;
    return{
        change: function(ele){
            if(boxFlag){
                 ele.style.backgroundColor = "blue";
            }
            else{
                ele.style.backgroundColor = "red";
            }
            boxFlag = !boxFlag;
        }
    }
})();