библиотека 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);
}
});
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);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
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объект abooleanсвойства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]функция: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"... });
КАКОЙ-ТО МЭШАП!
создать хорошую функцию
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