Question

通常当我编写切换功能时，例如在2种背景颜色之间切换，我使用全局变量作为标志。比如像这样 -

＆＃13;

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

＆＃13;

#box
{
  width:100px;
  height:100px;
  background-color:red;
}

＆＃13;

<h3>Click the box to toggle</h1>
<div id="box" onclick="change()"></div>

＆＃13;

但是当我编写多个函数来切换各种属性时，全局变量的数量会增加，并且正如这些文章所述 -
Article #1
Article #2
Article #3
必须避免全局变量。所以我的问题是，编写一个简单的函数如切换的另一种方法是什么？

Answer 1

您可以使用addEventListener与自动执行的匿名函数绑定到click事件来执行此操作。

(function(){
   var flag = true;
   document.getElementById('box').addEventListener('click', function() {
       this.style.backgroundColor = flag ? "blue" : "red";
       flag = !flag;

   });
})();

#box
{
  width:100px;
  height:100px;
  background-color:red;
}

<h3>Click the box to toggle</h1>
<div id="box"></div>

Answer 2

您可以使用立即调用的函数表达式（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;
    }
}

}());

通过将代码包装在一个函数中，您创建了另一个范围，并保留了全局空间。 Here是一篇关于它的文章，但如果您只是输入搜索引擎就可以找到很多文章＆＃39; IIFE＆＃39;

Answer 3

您可以检查背景颜色属性，然后执行相反的操作：

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

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

Answer 4

您可以为页面/网站创建一个Module对象，如下所示：

<强> HTML

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

<强>的JavaScript

var MyModule = (function(){
    var boxFlag = true;
    return{
        change: function(ele){
            if(boxFlag){
                 ele.style.backgroundColor = "blue";
            }
            else{
                ele.style.backgroundColor = "red";
            }
            boxFlag = !boxFlag;
        }
    }
})();

JSFiddle：http://jsfiddle.net/sbznrhgy/1/

Answer 5

jQuery＆＃39; toggleClass方法正是出于这个目的：

＆＃13;

$('.box').click(function() {
  $(this).toggleClass('blue');
});

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  margin: 10px;
}

.box.blue {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click the box to toggle</h3>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

＆＃13;

如果您需要在两个以上的课程之间切换，可以查看 hasClass ，然后使用 addClass 和 removeClass ：

＆＃13;
＆＃13;
$('.box').click(function() { if($(this).hasClass('blue')) { $(this).removeClass('blue'); $(this).addClass('green'); } else if($(this).hasClass('green')) { $(this).removeClass('green'); } else { $(this).addClass('blue'); } });
＆＃13;
.box { width: 100px; height: 100px; background-color: red; display: inline-block; margin: 10px; } .box.blue { background-color: blue; } .box.green { background-color: green; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Click the box</h3> <div class="box"></div> <div class="box"></div> <div class="box"></div>
＆＃13;
＆＃13;
＆＃13;
如果要将非CSS属性附加到元素，请使用data：

＆＃13;
＆＃13;
$('button').click(function() { var clicks= $(this).data('clicks') || 1; if(clicks>=3) { $(this).html('You clicked me thrice!'); } else { $(this).data('clicks', clicks+1); } });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click me three times</button>
＆＃13;
＆＃13;
＆＃13;

在不使用全局变量的情况下在Javascript / jQuery中切换的适当方法？

5 个答案: