JQuery нажмите/переключитесь между двумя функциями

Я ищу способ запуска двух отдельных операций/функций/ "блоков кода", когда что-то щелкнули, а затем полностью другой блок, когда одно и то же нажатие снова. Я поставил это вместе. Мне было интересно, был ли более эффективный/элегантный способ. Я знаю о 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);
    }
});

ОТВЕТЫ

Ответ 1

jQuery имеет два метода, называемых .toggle(). другой [docs] делает именно то, что вы хотите для событий click.

Примечание.. По-видимому, по крайней мере с jQuery 1.7, эта версия .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));

DEMO

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

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

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

Обновление 2:

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

Ответ 2

DEMO

.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);

ДЕМО с помощью Op Code

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);

Ответ 3

Плагин Micro JQuery

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

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>

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Я не думаю, что вы должны реализовать метод toggle, поскольку есть причина, по которой он был удален из jQuery 1.9.

Рассмотрим вместо этого использование toggleClass, которое полностью поддерживается jQuery:

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

Скажем, например, что триггер события onclick, поэтому:

Первый вариант:

$('#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();
    }
}

Ответ 7

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

 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 через.)

Ответ 8

Если все, что вы делаете, поддерживает логическое isEven, тогда вы можете проверить, находится ли класс isEven в элементе, а затем переключить этот класс.

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

Edit:
jQuery имеет метод switchClass, который в сочетании с hasClass может использоваться для анимации между двумя указанными вами ширинами. Это выгодно, потому что вы можете изменить эти размеры позже в своей таблице стилей или добавить другие параметры, такие как background-color или margin, для перехода.

Ответ 9

изменяя первый ответ, вы можете переключаться между 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>