두 기능 사이에 jQuery를이 클릭 / 전환

해결법

1.jQuery를이 .toggle라는 두 가지 방법이있다 (). 다른 하나 [문서]를 정확히 클릭 이벤트를 원하는 것을.

jQuery를이 .toggle라는 두 가지 방법이있다 (). 다른 하나 [문서]를 정확히 클릭 이벤트를 원하는 것을.

참고 :이 jQuery를 1.7 이후 적어도 .toggle이 버전의 두 가지 버전이 존재, 즉 것을, 아마 정확히 이유로 사용되지 않는 것 같다. 요소의 가시성을 변경 .toggle를 사용하는 것은 단지 더 많이 사용합니다. 이 방법은 1.9 jQuery를 제거 하였다.

아래 하나가 플러그인과 동일한 기능을 구현할 수있는 방법의 예이다 (그러나 아마 같은 문제를 노출 내장 버전 (설명서의 마지막 단락)를 참조하십시오).
```
(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의에서 찾을 수 있습니다.

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

DEMO와 연산의 코드

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.당신이 당신의 자신의 체인 방식 clickToggle jQuery를 방법을 원하는 경우에 당신은 그것을 같이 할 수 있습니다 :

당신이 당신의 자신의 체인 방식 clickToggle jQuery를 방법을 원하는 경우에 당신은 그것을 같이 할 수 있습니다 :

jQuery.fn.clickToggle 함수 = (a, b) { this.on 복귀 ( "클릭"기능 (EV) {[B를 A] [이. $ _ ^ IO = 1] .call (이, EV)}) }; // 테스트: $ ( '버튼'). clickToggle (기능 (EV) { $ (이)는 .text ( "B"); } 함수 (EV) { $ (이)는 .text ( "A"); }); <버튼>을 <버튼>을 <버튼>을 <스크립트 SRC는 = "//이 code.jquery.com/jquery-3.3.1.min.js">

라이브 데모
```
function a(){ console.log('a'); }
function b(){ console.log('b'); }

$("selector").click(function() { 
  return (this.tog = !this.tog) ? a() : b();
});
```
당신이 원하는 경우에도 짧은 (왜 것 하나, 바로?!) 당신이 좋아하는 비트 단위 XOR * 문서 연산자를 사용할 수 있습니다 : 데모
```
  return (this.tog^=1) ? a() : b();
```
그게 다야. 트릭은이 개체에 세트에 부울 속성 옷, 그리고 그것을 부정를 사용하여 토글 (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);
}); 
```
ALSO : 당신은 또한 수 있습니다 저장 - 토글 같은 : 데모:
```
$("selector").click(function() {
  $(this).animate({width: (this.tog ^= 1) ? 260 : 30 });
}); 
```
그러나 그는 두 개의 별도의 작업 / 기능을 가질 수있는 방법을 찾고에 대한 영업 이익의 정확한 요구하지 않았다

참고 :이 (... 그것은 그것의 용도로 사용) 현재 토글 상태를 저장하지만, 단지 배열에있는 우리의 기능 위치를 반전하지 않습니다

단순히 배열 순서를 반대로하고 배열을 실행 온 클릭 당신은 단순히 배열 내부 기능 B,를 A를 저장 [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"...
});
```
jQuery를 DEMO 자바 스크립트 DEMO

기능을, 당신의 두 가지 기능을 포함하는 좋은 기능 toggleAB ()를 만들고 배열에 넣어,하고 배열의 끝에서 당신은 단순히 실행 [0 // 1] 각각에서 함수에 전달되는 옷 속성에 따라 이 참조 :
```
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 );
```
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.나는 그것이 jQuery를 1.9에서 제거 된 이유가 있기 때문에 당신이 토글 방법을 구현해야합니다 생각하지 않습니다.

나는 그것이 jQuery를 1.9에서 제거 된 이유가 있기 때문에 당신이 토글 방법을 구현해야합니다 생각하지 않습니다.

대신에 완전히 jQuery를 지원하는 toggleClass 사용을 고려 :
```
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();
    }
}
```
7.당신이하고있는 모든 부울 ISEVEN을 유지하는 경우 클래스 ISEVEN가 그 클래스를 전환 요소에있는 경우 당신은 검사를 고려할 수 있습니다.

당신이하고있는 모든 부울 ISEVEN을 유지하는 경우 클래스 ISEVEN가 그 클래스를 전환 요소에있는 경우 당신은 검사를 고려할 수 있습니다.

계수와 같은 공유 변수를 사용하는 것은 잘못된 관행의 일종이다. 그 변수의 범위가 무엇인지 자신에게 물어, 당신이 당신의 페이지를 전환 할 거라고 당신이 10 개 항목이 있다면 생각 당신은 10 개 변수를 만들 것이다, 또는 배열이나 변수는 자신의 상태를 저장하기 위해? 아마 아닙니다.

편집하다: jQuery를 정의한 한 폭 hasClass과 결합 될 때 둘 사이에 애니메이션을 사용할 수 switchClass 방법이있다. 당신이 당신의 스타일에 나중에이 크기를 변경하거나 전환에 배경 색상이나 여백 같은 다른 매개 변수를 추가 할 수 있기 때문에 유리하다.

8.기능과 부울의 몇 가지를 사용합니다. 여기에 패턴이 아니라 전체 코드는 다음과 같습니다

기능과 부울의 몇 가지를 사용합니다. 여기에 패턴이 아니라 전체 코드는 다음과 같습니다

 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

(두 번째 내 머리 위로 떨어져 참고하고 정확한 구문이 보장되지 않도록 나는 언어를 많이 섞는다.를 통해 실제 자바 스크립트에 가까워 야.)

9.n을 기능 사이를 전환 할 수있는 첫 번째 대답을 수정 :

n을 기능 사이를 전환 할 수있는 첫 번째 대답을 수정 :

<메타 캐릭터 = "UTF-8"> <메타 이름 = "발전기"내용 = "EditPlus.com®"> -> <스크립트 SRC = "https://code.jquery.com/jquery-2.2.4.min.js"> <제목> 내 바보 같은 예를 <탐색>
B <서브> 1
B <서브> 2
B <서브> 3
B <서브> N <스크립트 유형 = "텍스트 / 자바 스크립트">

10.한 줄 솔루션 : 기본 개념 :

한 줄 솔루션 : 기본 개념 :

$('sth').click(function () {
    let COND = $(this).propery == 'cond1' ? 'cond2' : 'cond1';
    doSomeThing(COND);
})

jsfiddle에 대한 예제

실시 예 1, 토글 모드 요소의 innerHTML을 변경 :

$('#clickTest1').click(function () {
    $(this).html($(this).html() == 'click Me' ? 'clicked' : 'click Me');
});

"없음"및 "인라인 블록"간에 표시 전환 실시 예 2 :

$('#clickTest2, #clickTest2 > span').click(function () {
    $(this).children().css('display', $(this).children().css('display') == 'inline-block' ? 'none' : 'inline-block');
});

from https://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를에서 CSS 규칙의 백분율 값을 얻을 (0)	2020.10.01
[JQUERY] 마우스 오버 대 JQuery와 mouseenter () () (0)	2020.10.01
[JQUERY] iframe이 SRC 변경 이벤트 감지? (0)	2020.10.01
[JQUERY] 그것은 "스타일 변화"이벤트를 수신 할 수 있습니까? (0)	2020.10.01
[JQUERY] 캐치 페이스트 입력 (0)	2020.09.30

복붙노트

[JQUERY] 두 기능 사이에 jQuery를이 클릭 / 전환

두 기능 사이에 jQuery를이 클릭 / 전환

해결법

1.jQuery를이 .toggle라는 두 가지 방법이있다 (). 다른 하나 [문서]를 정확히 클릭 이벤트를 원하는 것을.

2.데모

3.당신이 당신의 자신의 체인 방식 clickToggle jQuery를 방법을 원하는 경우에 당신은 그것을 같이 할 수 있습니다 :

4.당신이해야 할 모든 값 토글 경우 난 당신이 보여준 코드에 대한 이런 짓을 할 것이다 :

5.나는 두 가지 기능 사이에 전환 효과를 만들려면이를 사용했다.

6.나는 그것이 jQuery를 1.9에서 제거 된 이유가 있기 때문에 당신이 토글 방법을 구현해야합니다 생각하지 않습니다.

7.당신이하고있는 모든 부울 ISEVEN을 유지하는 경우 클래스 ISEVEN가 그 클래스를 전환 요소에있는 경우 당신은 검사를 고려할 수 있습니다.

8.기능과 부울의 몇 가지를 사용합니다. 여기에 패턴이 아니라 전체 코드는 다음과 같습니다

9.n을 기능 사이를 전환 할 수있는 첫 번째 대답을 수정 :

10.한 줄 솔루션 : 기본 개념 :

'JQUERY' 카테고리의 다른 글

티스토리툴바