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

Question

The following code doesn't seem to work for jQuery versions higher than 1.8. Can someone explain how can we get the same functionality from newer versions, though? Also, shouldn't we have a structure like element.click(function(){element.toggle();}) ? Why is the toggle() method alone working on click, without actually specifying a .click() method before it?

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

try this

 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

First of all, don't try to deal with raw CSS properties, this is really inflexible approach. Avoid $.fn.css method for styling. You should use classes with necessary styles, background, color, etc.

Now, the simple and effective solution I can think of is to use toggleClass method like this:

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

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

Here is a simple demo that toggles classes on each click.

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

The benefit here is that you can toggle as many classes (not only 3) as you wich, just add new class to classes array.