2011-09-21 3 views
0

미안합니다.이 초보자 질문에 죄송합니다. 제게 인내심을주십시오.) 나는 여전히 JavaScript/jQuery를 연구 중입니다.자바 스크립트/jQuery 트랙 이미지 버튼 클릭 수

제 목표는 사용자가 이미지 버튼을 한 번만 클릭하도록하는 것입니다 (중복 된 양식 제출로 인해 값이 중복되지 않도록).

가 여기에 내가 할거야 접근이다 : 버튼 이미지이기 때문에

, 난 그냥 첫 번째 단추를 클릭 한 후 그것을 해제 할 수 있습니다. 이미지 버튼을 숨길 수는 있지만 사용자가 버튼에 어떤 일이 일어 났는지 궁금해하기 때문에 좋은 생각이라고 생각하지 않습니다. 그래서 나는 사용자가 버튼을 몇 번 클릭했는지 추적하기 위해 JavaScript에서 전역 변수를 만들 수 있다고 생각했습니다. 중복 된 브라우저 탭간에.

가 여기 내 예제 코드입니다 :

HTML

<html> 
    <head><title>Global Variable Test 1</title></head> 
    <body> 
      <script type="text/javascript" src="clickCount.js"></script> 
      <a href="#" onClick="countClicks();"><img src="arrow.gif" /></a> 
    </body> 
</html> 

자바 스크립트

<!-- hide script from old browsers 
    var counter = 0; 
    function countClicks() { 
     counter++; 
     if(counter > 1) 
     alert("Waah, stop clicking!"); 
     else 
     alert('Number of clicks:' + counter); 
    } 
// end hiding script from old browsers --> 

글쎄, 나는 한 페이지에 있지만 경우 클릭 수를 계산 할 수 있었다 I 동일한 페이지에서 두 개의 탭을 열어두면 다음 페이지에서 변수를 "공유"할 수 없습니다. (예 : 탭 1에서 이미지 버튼을 클릭하고 탭 2에서 이미지 버튼을 클릭하면 클릭 수가 2가 아니어야합니다.) 그래서 내 질문은 : 브라우저 탭에서 공유 할 수있는 JavaScript에서 전역 변수를 만들 수 있습니다? 사용자가 이미지 버튼을 한 번만 클릭 할 수 있도록하는 더 좋은 방법이 있습니까?

도움이 될 것입니다.

TIA.

+0

'로컬 저장소'를 통해 데이터를 공유 할 수 있습니다. 하나의 탭에 저장하고 다른 탭에 가져 오기 –

+0

@ant_Ti Localstorage? 조금 더 설명해 주시겠습니까? 감사. –

+0

[시도해보십시오] (http://paperkilledrock.com/2010/05/html5-localstorage-part-one/) –

답변

3

제 목표는 사용자가 이미지 버튼을 한 번만 클릭하도록하는 것입니다 (중복 양식 제출로 인해 값이 중복되지 않도록).

$('#mybuttonid').one("click", function() { 
     //my action on click here 
    }); 

그 것이다 화재 클릭 이벤트 한 번만

나는 브라우저 탭에서 공유 할 수있는 자바 스크립트에서 전역 변수를 만들 수 방법 :

는 다음 문을 사용하여?

수 없습니다. 대신 쿠키를 사용할 수 있습니다.

+0

빠른 답장을 보내 주셔서 감사합니다. 작동하지 않습니다. http://jsfiddle.net/annelagang/szHgJ/ –

+0

예, 먼저 왼쪽 패널에서 jQuery 프레임 워크를 선택하지 않았습니다. 두 번째로 내 샘플에서는 typo :'finction-> function'입니다. – Samich

+0

여기가 작동 중입니다. http://jsfiddle.net/szHgJ/3/ – Samich

0

더 좋은 전략은 IMO 이미지 버튼을 사용 중지하는 것입니다. 으로 표시되도록 설정할 수 있지만 (실제로는 페이드 아웃 됨, 응답 없음) 실제로 삭제되지는 않습니다. 즉, 약간 희미 해지고 후속 클릭을 무시하십시오.

예 :

$('#yourButton').click(function(e){ 
    $(this).fadeTo(0.5); 
    $.get("someURL", {buttonClick:1}); 
    $(this).unbind().bind('click', function(e){ 
     e.preventDefault(); 
    }); 
}); 

편집 : 글로벌 VAR를 만들려면, AFAIK 당신이 브라우저 탭을 통해이 작업을 수행 할 수 있습니다 - 오히려 당신이 세션에서 그 저장해야합니다. 약간의 PHP 또는 이것을 사용하여 버튼을 클릭 할 때 AJAX를 사용하여 쿼리 할 수 ​​있습니다 (수정 된 예제 참조).

+0

나는 너의 "퇴색 한"심상 아이디어를 좋아한다. 사실,이 응용 프로그램에 ASP.NET을 사용하고 있습니다. 위의 샘플은 테스트 코드이며 성공하면 실제 코드로 전송합니다. JavaScript/jQuery를 사용하는 이유는 서버 포스트 백을 피하기 위해서입니다. Btw, 코드가 작동하지 않습니다. 'c http://jsfiddle.net/annelagang/KEqqH/ –

+0

아, 죄송합니다. 내 눈은 당신의 AJAX 제안 부분을 건너 뛰는 것 같습니다. Hehe. AJAX를 사용해보십시오. 감사. –

+0

@AnneLagang 당신은 당신의 바이올린에서 jQuery로 라이브러리를 설정할 필요가 있습니다. – jammypeach