jQuery에서 div의 속성 값을 click()을 통해 가져 오기

막연한 제목에 죄송합니다. 나는 jQuery를 사용하고있다. 내 애플 리케이션에 작은 시나리오가 있고 나는 붙어있다.jQuery에서 div의 속성 값을 click()을 통해 가져 오기

문제 : 내 스크립트에 func1 및 func2이라는 두 가지 기능이 있습니다. 사용자가 div 요소를 클릭하고이 두 함수의 code 속성 값에 액세스 할 때도이 두 함수를 모두 실행하려고합니다.

<div id="testId" code="102">Click ME</div>.

코드 :

<html> 
    <body> 
     <div id="testId" code="102">Click ME</div> 
     <script type='text/javascript' src='jquery.js'></script> 
     <script type='text/javascript' src='script.js'></script> 
    </body> 
</html>

script.js : 내 두 함수에 code="102"의 값에 액세스 할

var code1 = ""; 
var code2 = ""; 

func1 = function(){ 
    code1 = $(this).attr('code'); 
    alert("code1 is "+code1); 
} 

func2 = function(){ 
    code2 = $(this).attr('code'); 
    alert("code2 is "+code2+'2'); 
} 

$('#testId').click(func1, func2); 
/*$('#testId').click(function(){ 
    func1(); 
    func2(); 
});*/

. 나는 두 가지 방법을 시도했다.

이

$('#testId').click(func1, func2);

이 만 func2을 실행 : 먼저 나는 다음 코드를 시도했다. code 속성 값은 func2에 의해서도 액세스됩니다. 하지만 func1은 실행되지 않습니다! 이 작업을 수행하는 방법?

그런 다음 두 번째 방법을 시도했습니다. 나는 사용자가 클릭하면 지금까지 다음 코드

$('#testId').click(function(){ 
     func1(); 
     func2(); 
    });

를 사용하여, 사업부에 모두 기능을 수행 할 수 있어요하지만 지금은 code 속성의 값에 액세스 할 수 없습니다 생각하고 정의되지! code 속성의 값에 func1 및 func2에 액세스하려면 어떻게해야합니까?

나는

$('#testId').click(function(){ 
      func1('value of code'); 
      func2('value of code'); 
     });

, 나는 값에 액세스 나중에 아래와 같이 func1 및 func2에 매개 변수를 전달할 수 있습니다 알고하지만 가능하면 다른 솔루션을 찾고 있어요.

마지막으로 나는 두 가지 기능을 모두 수행 할 수있는 방법을 찾고 있으며 code 속성 값에 액세스 할 수도 있습니다. 모든 제안을 주시면 감사하겠습니다!

출처

2014-10-16 ρss

먼저 .Click() 메서드를 사용하고 있으므로 .click(func1, func2)을 사용하는 경우 .click([eventData ], handler)을 사용하는 것이 좋습니다. 함수 2 만 실행하므로 핸들러입니다. 당신이 함수를 호출 누가 보내 .call()와

<div id="testId" data-code="102">Click ME</div> 


    $('#testId').click(function(){ 
     func1.call(this); 
     func2.call(this); 
    }); 

func1 = function(){ console.log($(this).data('code')); 
    code1 = $(this).data('code'); 
    alert("code1 is "+code1); 
}

:처럼 훨씬 더 데이터 속성을 만들 수있어 코드를 얻을 필요하면

$('#testId').click(function(){ 
     func1(); 
     func2(); 
    });

: 같은

그럼 당신은 실행해야합니다 .

장점 :

그럼 .DATA() ATTR 당신이 당신이이 추가적으로 paramert, 그것이 어디에서 오는지 당신이 아마 모르는 대신 코드 만의 것을 알 수 읽기 모든 데이터 becuse 좋습니다. .call을 unsing하는 것은 메소드가 매개 변수를 깨끗하게 유지하도록합니다.

단점 당신은 알 필요가

을 수행 전화를하는 일. 그리고 아마도 jQuery와 바닐라를 섞을 수도 있습니다. :)

LIVE DEMO

출처

2014-10-16 14:27:47

예, 이것이 내가 찾고 있었던 것입니다. +1 :) click()에 대한 좋은 설명. –

이것은 실제로 범위 문제입니다. 적절한 해결 방법은 http://jsfiddle.net/dboots/dhd0dem7/입니다.

코드에서 func1과 func2에서 $ (this)를 참조하고 있습니다. 이는 실제 func1 및 func2 범위를 나타내며 "코드"가 무엇인지 전혀 알지 못합니다.

클릭 핸들러 안에있는 $ (this)는 실제로 클릭하는 div 요소를 참조하므로 거기에서 사용하기에 적합합니다.

jsfiddle에서 코드를 전역 수준에서 선언하고 클릭 핸들러에 설정합니다.

var code; 

$('#testId').click(function() { 
    code = $(this).attr('code'); 

    func1(); 
    func2(); 
});

그런 다음 func1 및 func2 함수는 적합하다고 생각되면 함수에 액세스 할 수 있습니다.http://jsfiddle.net/dboots/dhd0dem7/1/에서 볼 수 있듯이

function func1() { 
    alert('func1 code: ' + code); 
} 

function func2() { 
    alert('func2 code: ' + code); 
}

대체 솔루션

은 각 기능에 코드를 전달합니다. 함수는 $ (이)에 액세스하려고 할 때

function func1(code) { 
    alert('func1 code: ' + code); 
} 

function func2(code) { 
    alert('func2 code: ' + code); 
} 

$('#testId').click(function() { 
    code = $(this).attr('code'); 

    func1(code); 
    func2(code); 
});

출처

2014-10-16 14:22:30

나는 FUNC1과 FUNC2으로 매개 변수를 전달에 대한 내 질문에 언급했다. 나는 다른 해결책을 찾고 있었다. Wilfredo는 제가 찾고 있던 해결책을 제공했습니다. 귀하의 답변에 감사드립니다. +1 : –

당신은 그것을 클릭 이벤트에서와 같은 객체를 가리 킵니다이

func1.bind(this)(); 
func2.bind(this)();

이런 식의 값에 함수를 바인딩 할 수 있습니다

출처

2014-10-16 14:25:25 user2321864

이것은 또한 효과가 있습니다. 감사합니다 +1 : –

jQuery에서 div의 속성 값을 click()을 통해 가져 오기

답변

관련 문제