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

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

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

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

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

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

可以通过使用 addEventListener 与自执行匿名函数结合使用来绑定到单击事件来执行此操作。

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

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

通过将代码包装在函数中，您已经创建了另一个级别的范围并保留了全局空间。这是一篇关于它的文章，但如果你只是输入搜索引擎'IIFE'

您可以检查背景颜色属性，然后像这样做相反的操作：

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

如果您有超过 2 个选项，只需添加 elseif 语句...

您可以像这样为页面/站点创建一个模块对象：

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

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

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

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

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

如果需要在两个以上的类之间切换，可以选中hasClass，然后使用 addClass 和 removeClass ：

$('.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');
  }
});

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

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

如果要将非 CSS 属性附加到元素，请使用 data ：

$('button').click(function() {
  var clicks= $(this).data('clicks') || 1;
  if(clicks>=3) {
    $(this).html('You clicked me thrice!');
  }
  else {
    $(this).data('clicks', clicks+1);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me three times</button>

相关内容

最新更新

热门标签：