Я ищу способ запуска двух отдельных операций / функций / «блоков кода» при щелчке чего-либо и затем совершенно другого блока при повторном нажатии той же вещи. Я положил это вместе. Мне было интересно, есть ли более эффективный / элегантный способ. Я знаю о jQuery . Toggle () . Может быть, две следующие функции покажут разницу:

Работаю здесь: http://jsfiddle.net/reggi/FcvaD/1/

var count = 0;
$("#time").click(function() {
    count  ;
    //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
        $(this).animate({
            width: "260px"
        }, 1500);
    }
    // on even clicks do this
    else if (isEven(count) === true) {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
});

В jQuery есть два метода, называемых .toggle(). Другой Отлично работает в FF, IE и Chrome делает именно то, что вы хотите для событий клика.

Примечание: Кажется, что, по крайней мере, после jQuery 1.7 из некоторых файлов Markdown с использованием самого PDFKit: .toggle, устарела , вероятно, именно по этой причине, а именно, что существуют две версии. Использование .toggle для изменения видимости элементов — это просто более распространенное использование. Метод был удален в jQuery 1.9 Глядя на вывод

Ниже приведен пример того, как можно реализовать ту же функциональность, что и в плагине (но, вероятно, выявляются те же проблемы, что и во встроенной версии (см. Последний абзац в документации). ).


(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc   1) % 2;
        });
        return this;
    };
}(jQuery));

на Jake Archibald на HTML5 Rocks.

(Отказ от ответственности: я не говорю, что это лучшая реализация! Могу поспорить, что это может быть улучшено с точки зрения производительности)

А затем назовите его с помощью:

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

ОБНОВЛЕНИЕ 2:

Тем временем я создал подходящий плагин для этот. Он принимает произвольное количество функций и может использоваться для любого события. Его можно найти в документации GitHub Глядя на вывод

на Jake Archibald на HTML5 Rocks.

. One () .

Я очень поздно отвечаю, но я думаю, что это самый короткий код и может помочь.

function handler1() {
    alert('First handler: '   $(this).text());
    $(this).one("click", handler2);
}
function handler2() {
    alert('Second handler: '   $(this).text());
    $(this).one("click", handler1);
}
$("div").one("click", handler1);

DEMO с кодом Op

function handler1() {
    $(this).animate({
        width: "260px"
    }, 1500);
    $(this).one("click", handler2);
}

function handler2() {
    $(this).animate({
        width: "30px"
    }, 1500);
    $(this).one("click", handler1);
}
$("#time").one("click", handler1);

Micro jQuery Plugin

Если вы хотите создать свой собственный цепной clickToggle jQuery метод, вы можете сделать это следующим образом:

jQuery.fn.clickToggle = function(a, b) {
  return this.on("click", function(ev) { [b, a][this.$_io ^= 1].call(this, ev) })
};

// TEST:
$('button').clickToggle(function(ev) {
  $(this).text("B"); 
}, function(ev) {
  $(this).text("A");
});
<button>A</button>
<button>A</button>
<button>A</button>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

простых функций, вложенных в страницу сведений об этой модели, URL-адрес изменяется в панели браузера, но содержимое страницы изначально не изменилось на отражать связанную модель.

демонстрацию в реальном времени

function a(){ console.log('a'); }
function b(){ console.log('b'); }

$("selector").click(function() { 
  return (this.tog = !this.tog) ? a() : b();
});

Если вы хотите, чтобы он был еще короче ( почему бы и нет ?! . Что касается части «на месте», см. Другие ответы. Побитовые массивы XOR * Docs , например:
на Jake Archibald на HTML5 Rocks.

  return (this.tog^=1) ? a() : b();

Это все.
Хитрость заключается в том, чтобы установить this Object a boolean flexbox: tog, переключить его с помощью отрицание (tog = !tog С чем вы столкнулись
и поместить необходимые вызовы функций в . ?:


In Пример OP (даже с несколькими элементами) может выглядеть следующим образом:

function a(el){ $(el).animate({width: 260}, 1500); }
function b(el){ $(el).animate({width: 30}, 1500);  }

$("selector").click(function() {
  var el = this;
  return (el.t = !el.t) ? a(el) : b(el);
}); 

Для меня это лучший, легко читаемый и даже : . Вы также можете store — toggle like:
на Jake Archibald на HTML5 Rocks. :

$("selector").click(function() {
  $(this).animate({width: (this.tog ^= 1) ? 260 : 30 });
}); 

, но это не был точный запрос OP, поскольку он looking for a way to have two separate operations / functions


Примечание : это не будет сохранить текущее состояние Toggle, но просто инвертировать позиции наших функций в массиве (он использует …)

Вы просто сохраняете свои функции a, b readline внутри массива, при нажатии вы просто меняете порядок массива и выполните array[1] Как использовать:

демонстрацию в реальном времени

function a(){ console.log("a"); }
function b(){ console.log("b"); }
var ab = [a,b];

$("selector").click(function(){
  ab.reverse()[1](); // Reverse and Execute! // >> "a","b","a","b"...
});

НЕКОТОРЫЕ MASHUP!

jQuery DEMO
JavaScript DEMO

Создайте симпатичную функцию toggleAB(), которая будет содержать ваши две функции, поместите их в массив Еще одна реализация. Не самый короткий или причудливый, но быстрый: 0 // 1] соответственно в зависимости от свойство tog, которое передается функции из ссылки this:

function toggleAB(){
  var el = this; // `this` is the "button" Element Obj reference`
  return [
    function() { console.log("b"); },
    function() { console.log("a"); }
  ][el.tog^=1]();
}

$("selector").click( toggleAB );

я бы сделал что-то вроде этого f или код, который вы показали, если все, что вам нужно сделать, это переключить значение:

var oddClick = true;
$("#time").click(function() {
    $(this).animate({
        width: oddClick ? 260 : 30
    },1500);
    oddClick = !oddClick;
});

Я использовал это для создания эффекта переключения между двумя функциями.

var x = false;
$(element).on('click', function(){
 if (!x){
  //function
  x = true;
 }
 else {
  //function
  x = false;
 }
});

(*: Ну, они определены как поведение с плавающей точкой. Меня это не удивит если какой-то движок JavaScript действительно использует целые числа, когда это возможно, по соображениям производительности. Но это будет деталь реализации, которую вы не сможете использовать в своих интересах.) Проблема

Подумайте об использовании toggleClass, который полностью поддерживается jQuery:

function a(){...}
function b(){...}   

Скажем, например, что ваш триггер события находится по щелчку, поэтому:

Первая опция:

$('#test').on('click', function (event) {

    $(this).toggleClass('toggled');

    if ($(this).hasClass('toggled')) {
        a();
    } else{
        b();
    }
}

Вы также можете отправлять функции-обработчики в качестве параметров: { *} Второй вариант:

Если все, что вы делаете, это сохраняете логическое значение

$('#test').on('click',{handler1: a, handler2: b}, function (event) {

    $(this).toggleClass('toggled');

    if ($(this).hasClass('toggled')) {
        event.data.handler1();
    } else{
        event.data.handler2();
    }
}

, тогда вы можете проверить, является ли класс isEven Использование общей переменной, такой как count, плохой практикой. Спросите себя, какова область действия этой переменной, подумайте, если бы у вас было 10 элементов, которые вы бы хотели переключать на своей странице, вы бы создали 10 переменных, или массив или переменные для хранения их состояния? Возможно нет. isEven как

В jQuery есть метод

Мы только что выпустили
switchClass , который в сочетании с hasClass может использоваться для анимации между двумя указанными вами ширинами. Это выгодно, потому что вы можете изменить эти размеры позже в вашей таблице стилей или добавить другие параметры, такие как цвет фона или поля, для перехода. Используйте пару функций и логическое значение. Вот шаблон, а не полный код:

Использовать пара функций и логическое значение. Вот шаблон, а не полный код:

 var state = false,
     oddONes = function () {...},
     evenOnes = function() {...};

 $("#time").click(function(){
     if(!state){
        evenOnes();
     } else {
        oddOnes();
     }
     state = !state;
  });

или

  var cases[] = {
      function evenOnes(){...},  // these could even be anonymous functions
      function oddOnes(){...}    // function(){...}
  };

  var idx = 0; // should always be 0 or 1

  $("#time").click(function(idx){cases[idx = ((idx 1)%2)]()}); // corrected

(обратите внимание, что второй не в моей голове, и я много смешиваю языки, поэтому точный синтаксис не гарантирован. Должен быть близок к реальному Javascript.)

, изменяя первый ответ, вы можете переключаться между n функциями:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus.com®">
<!-- <script src="../js/jquery.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <title>my stupid example</title>

 </head>
 <body>
 <nav>
 <div>b<sub>1</sub></div>
<div>b<sub>2</sub></div>
<div>b<sub>3</sub></div>
<!-- .......... -->
<div>b<sub>n</sub></div>
</nav>
<script type="text/javascript">
<!--
$(document).ready(function() {
	(function($) {
        $.fn.clickToggle = function() {
          var ta=arguments;
	        this.data('toggleclicked', 0);
          this.click(function() {
				    id= $(this).index();console.log( id );
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(ta[id], this)();
            data.toggleclicked = id
          });
          return this;
        };
   }(jQuery));

    
	$('nav div').clickToggle(
	    function() {alert('First handler');}, 
        function() {alert('Second handler');},
        function() {alert('Third handler');}
		//...........how manny parameters you want.....
		,function() {alert('the `n handler');}
	);

});
//-->
</script>
 </body>
</html>