在两个或多个功能之间切换

Question

以下代码似乎不适用于 jQuery 高于 1.8 的版本。不过，有人可以解释一下我们如何从新版本中获得相同的功能吗？另外，我们不应该有像 element.click(function(){element.toggle();}) 这样的结构吗？为什么 toggle() 方法单独作用于点击，而没有在它之前实际指定 .click() 方法？

HTML:

<div style="width: 100px; height: 100px; background: orange;"></div>

JS

$("div").toggle(
  function () {
    $(this).css({"background":"blue"});
  },
  function () {
    $(this).css({"background":"red"});
  },
  function () {
    $(this).css({"background":"yellow"});
  }
);

Answer 1

试试这个

var count = 0;

function changeBackground() {
  var color = "";
  switch (count % 3) {
    case 0:
      color = "blue";
      break;
    case 1:
      color = "red";
      break;
    case 2:
      color = "yellow";
      break;
  }
  $("#content").css("background", color);
  count++;
}

div {
  height: 100px;
  width: 100px;
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" onclick="changeBackground()"></div>

Answer 2

首先，不要尝试处理原始 CSS 属性，这是非常不灵活的方法。避免使用 $.fn.css 方法进行样式设置。您应该使用具有必要样式、背景、颜色等的 classes

现在，我能想到的简单有效的解决方案是使用这样的 toggleClass 方法：

var classes = ['blue', 'red', 'yellow'];

$("div").toggleClass(function(i, oldClass) {
    var newClass = classes[(classes.indexOf(oldClass) + 1) % classes.length]
    return oldClass + ' ' + newClass;
});

这是一个简单的演示，可在每次点击时切换 classes。

$('.toggle').click(function() {
  
    var classes = ['blue', 'red', 'yellow'];

    $("div").toggleClass(function(i, oldClass) {
        var newClass = classes[(classes.indexOf(oldClass) + 1) % classes.length]
        return oldClass + ' ' + newClass;
    });
  
});

div {padding: 20px; border: 1px #DDD solid;}

.blue {background: blue;}
.red {background: red;}
.yellow {background: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

<button class="toggle">Toggle</button>

这里的好处是您可以切换尽可能多的 classes（不仅仅是 3 个），只需将新的 class 添加到 classes 数组即可。

在两个或多个功能之间切换

Toggle between two or more functions

javascript

jquery

function

toggle