Question

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

HTML：

java -Djava.library.path=/usr/local/lib -jar app.jar

JS

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

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方法进行样式设置。你应该使用具有必要风格，背景，颜色等的类。

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

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

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

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

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

这里的好处是你可以像往常一样切换多个类（不仅仅是3个），只需将新类添加到类数组中。

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

2 个答案: