библиотека 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);
}
});
534   9  

9 ответов:

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

Примечание: кажется, что по крайней мере с 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));

демо

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

и тогда вызовите его с помощью:

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

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

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

демо

.один() документация.

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

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

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

если вы хотите свой собственный chainable clickToggle метод jQuery вы можете сделать это так:

демо

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

$("selector").clickToggle(function() {   
// Do something here
}, function() {
// Do thething here
}); // (you can chain here other jQuery methods)

Простые Функции Toggler

LIVE DEMO

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

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

если вы хотите еще короче (почему бы и нет, верно?!) вы можете использовать побитовое Исключающее ИЛИ * Docs оператор как:
демо

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

вот и все.
фокус в том, чтобы установить к this объект a boolean свойства tog, и переключить его с помощью отрицание (tog = !tog)
и поставить необходимые вызовы функций в Условный Оператор ?:




в Примере 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);
}); 

и: вы можете магазине-toggle как:
демо:

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

но это не был точный запрос ОП для него looking for a way to have two separate operations / functions


используя массив.прототип.обратный:

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

вы просто храните ваш a, b функции внутри массива, onclick вы просто меняете порядок массива и выполняете array[1] функция:

LIVE Демо

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

КАКОЙ-ТО МЭШАП!

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

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

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

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

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

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

Edit:
jQuery имеет a 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.)

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

<!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>

Comments

    Ничего не найдено.