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);
}
});
jQuery에는 두가지 방법이 있습니다..toggle(). 다른 하나는 클릭 이벤트에 대해 원하는 대로 정확히 수행합니다.
참고: 적어도 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:
그동안 이에 적합한 플러그인을 개발했습니다.임의 수의 함수를 허용하며 모든 이벤트에 사용할 수 있습니다.깃허브에서 만나볼 수 있습니다.
.하나의 () 문서.
답변이 많이 늦었지만 가장 짧은 코드라 도움이 될 것 같습니다.
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);
마이크로 jQuery 플러그인
체인으로 연결할 수 있는 자신만의 클릭Toggle jQuery Method를 원하는 경우 다음과 같이 수행할 수 있습니다.
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>단순 함수 토글러
function a(){ console.log('a'); }
function b(){ console.log('b'); }
$("selector").click(function() {
return (this.tog = !this.tog) ? a() : b();
});
더 짧게 하고 싶다면(왜 그런 거죠?!) 다음과 같이 Bitwise XOR*Docs 연산자를 사용할 수 있습니다.
데모
return (this.tog^=1) ? a() : b();
그게 전부입니다.
방법은 다음과 같이 설정하는 것입니다.this오브젝트 aboolean소유물tog, negative()를 사용하여 토글합니다.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);
});
또한: 다음과 같이 저장 토글할 수도 있습니다.
데모:
$("selector").click(function() {
$(this).animate({width: (this.tog ^= 1) ? 260 : 30 });
});
하지만 OP의 정확한 요청은 아니었습니다
Array.prototype.reverse 사용:
참고: 이렇게 하면 현재 Toggle 상태가 저장되지 않고 Array의 함수 위치를 반대로 저장합니다(사용 용도가 있습니다...).
단순히 배열 안에 a,b 함수를 저장하고 클릭하면 배열 순서를 뒤집고 실행할 수 있습니다.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에서 삭제된 이유가 있기 때문에 토글 방식을 실행하면 안 될 것 같습니다.
jQuery에서 완전히 지원하는 toggleClass를 대신 사용해 보십시오.
function a(){...}
function b(){...}
예를 들어 이벤트 트리거가 on click(클릭 시)에 있다고 가정해 보겠습니다.
첫번째 옵션:
$('#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요소에서 해당 클래스를 전환합니다.
카운트와 같은 공유 변수를 사용하는 것은 일종의 나쁜 관행입니다.해당 변수의 범위가 무엇인지 자문해 보십시오. 페이지에서 전환하고 싶은 항목이 10개 있다면 10개의 변수를 생성하시겠습니까, 아니면 해당 상태를 저장할 배열이나 변수를 생성하시겠습니까?아마 아닐 것입니다.
편집:
jQuery에는 hasClass와 결합하면 정의한 두 너비 사이에서 애니메이션을 생성할 수 있는 switchClass 메서드가 있습니다.이는 스타일시트의 나중에 크기를 변경하거나 배경색 또는 여백과 같은 다른 매개변수를 전환에 추가할 수 있기 때문에 유용합니다.
몇 가지 함수와 부울을 사용합니다.전체 코드가 아닌 패턴이 있습니다.
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
(참고로 두 번째는 제 머리에서 벗어나 언어를 많이 섞기 때문에 정확한 구문은 보장되지 않습니다.통해 실제 자바스크립트에 근접해야 함.)
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>한 줄 솔루션: 기본 아이디어:
$('sth').click(function () {
let COND = $(this).propery == 'cond1' ? 'cond2' : 'cond1';
doSomeThing(COND);
})
예제 1, 내부 변경토글 모드에서 요소의 HTML:
$('#clickTest1').click(function () {
$(this).html($(this).html() == 'click Me' ? 'clicked' : 'click Me');
});
예 2: "none"와 "inline-블록" 사이를 토글링하여 표시합니다.
$('#clickTest2, #clickTest2 > span').click(function () {
$(this).children().css('display', $(this).children().css('display') == 'inline-block' ? 'none' : 'inline-block');
});
언급URL : https://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
'IT' 카테고리의 다른 글
| 워드프레스:게시물의 특정 URL 자동 변경 (0) | 2023.11.04 |
|---|---|
| 어떤 컴파일러가 실행 파일을 컴파일하는 데 사용되었는지 결정하는 방법은 무엇입니까? (0) | 2023.11.04 |
| HttpContext.현재의.라우팅 요청 시 세션이 null입니다. (0) | 2023.10.30 |
| 텍스트 열을 고유 키로 만들기 (0) | 2023.10.30 |
| 풀 후 이전 버전과 변경된 파일을 어떻게 다릅니까? (0) | 2023.10.30 |