每次点击同一元素的事件不同

Question

How Do I fire a new event for each click on a button. And how do I bring it in a loop, so after "click 3" it starts again with "click 1".

$('button').click(function () {

     //click 1
     cameraTween( camera.position, 1, 1, 1 );

     //click 2
     cameraTween( camera.position, 2, 2, 2 );

     //click 3
     cameraTween( camera.position, 3, 3, 3 );

});

Answer 1

One solution is to make a generic function by using .one with recursion:

function LoopEvent(selector, event, calls /*array of functions*/) {
    $(selector).one(event, function() {
        // Execute Function
        calls[0](); 

        // Send current function to the back of the array
        calls.push(calls.shift());

        // Attach next event
        LoopEvent(selector, event, calls);
    });
}

Then you could call it like:

LoopEvent("button", "click", [
  function() { cameraTween( camera.position, 1, 1, 1 ); },  
  function() { cameraTween( camera.position, 2, 2, 2 ); },
  function() { cameraTween( camera.position, 3, 3, 3 ); }
]);

Example Fiddle

Answer 2

Create a variable and increment it in the click event

var i = 1;
$('#myButton').click(function () {
  if (i > 3)
    i = 1;
  cameraTween(camera.position, i, i, i);
  i += 1;
});

Answer 3

使用一些变量来保存点击数，并使用switch来基于此变量调用不同的事件。

Answer 4

var x = 0;

$('button').click(function () {
x = x++;

if (x==1){cameraTween( camera.position, 1, 1, 1 );}
else{
      if (x==2){cameraTween( camera.position, 2, 2, 2 );}
      else{
         cameraTween( camera.position, 3, 3, 3 );
      }
}
});

Answer 5

// Create a variable one level higher than the scope of your click function
var clickCount = 0;

$('button').click(function () {
    clickCount++; // increment the count
    cameraTween(camera.position, clickCount, clickCount, clickCount);
    clickCount %= 3; // Reset every 3
});

Answer 6

Use a variable to track the clicks.

var clickCount = 1;
$('button').click(function () {
     if(clickCount > 3) {
       clickCount = 1;
     }

     cameraTween( camera.position, clickCount, clickCount, clickCount );
     clickCount++;
  });