2013-10-16 2 views
1

이 작업을 수행하는 데 약간의 어려움이 있습니다. 내가하고 싶은 일은 onclick에서 동적 변수를 가져 와서 div에 넣는다. 문서의 다른 div에 추가하고있다. 각 항목마다 데이터베이스 쿼리와 관련된 변수가 있으므로 데이터베이스에서 buildTicket() 변수를 채우는 것이 더 쉬울 것이라고 생각했습니다.어떻게 동적 변수를 jquery로 div에 추가 할 수 있습니까?

내가 뭔가 잘못하고 있음을 알고 있습니다. 나는 무엇을 알아낼 수 없다.

더 좋은 방법이 있다면, 나는 모두 귀입니다.

다음
<script type="text/javascript"> 
$(document).ready(function(){ 
$(function() { 
buildTicket = function(eventname,ticketprice,venueid,userid) { 
    $(".ticketbtn").click(function(){ 
     $(".ticketwindow").append("<div class='ticket'>" + eventname + " - " +  eventprice + "</div>"); 
    }); 
} 
}); 
</script> 

내 HTML은 다음과 같습니다 :

<div class="ticketbtn" onclick="buildTicket('Some Show','12.00','1','2');"> 
     <img src="assets/images/tixicon.png" alt=""> <div class="eventname">Some Show</div> 
     <div class="ticketprice">Adult - 12.00 </div> 
    </div> 

<div id="ticketwindow"> 

</div> 

누군가가 나에게이 문제를 알아낼 수 있습니다 여기에

내 자바 스크립트입니까?

(코드 형식 죄송 아직도 제대로 유래의 양식을 사용하는 방법을 알아 내려고 노력..)

감사합니다, 조

+0

당신은 당신은 반복적 인'document.ready' 기능, 내부 익명 기능이 당신의 HTML – NappingRabbit

+0

에서 클래스'ticketwindow' 인 요소를 가지고 있겠지가. 또한, 사용자의 익명 함수가 끝나는 > </스크립트 (function() {}() 대신에 하나의 중괄호) –

+0

함수에 반복적 인 반복문이 있기 때문에 여러 클릭 함수를 첨부하고 있습니다. 인라인 onclick을 제거하십시오 – Sergio

답변

0

첫째, $(function() {은 동일합니다.

두 번째로 jQuery를 사용하여 click()에 바인딩하는 경우 onclick 속성을 사용할 필요가 없으며 그 반대의 경우도 마찬가지입니다. 그냥 onclick 속성을 사용하는 경우

, 당신은 문서 준비 핸들러를 제거 할 수 있습니다, 그리고 click() 바인딩, 모두 함께 간단하게 정의 buildTicket() 기능.

세 번째로 eventprice 변수의 이름은 buildTicket()입니다.

jQuery를 사용하여 버튼 div의 click 이벤트에 바인딩합니다. http://jsfiddle.net/BdJAL/

+0

지금까지 너무 좋아. 정말로 멋지다. 그래서 이렇게하면, 다른 변수 (venuid, userid)를 어떻게 추가 할 수 있을까요? 나는 실제로 그 변수와 현재 날짜와 시간을 사용하여 고유 번호를 만듭니다. –

+0

여러 가지 방법이 있습니다. 각 단추 내의 숨겨진 div에 넣을 수 있고 동일한 방법으로 내 피들에 표시된 것과 같이 검색 할 수 있습니다. 그게 네가 한 일 이니? –

+0

... 각 티켓 유형을 자바 스크립트의 객체로 저장하십시오. 구현하기에 조금 더 고급이지만 코드를보다 간결하고 재사용 할 수 있습니다. –

0

당신은 버튼의 클릭에 온 클릭 리스너를 바인딩합니다.

onClick 요소 특성을 사용해야하는 경우 Unobtrusive JavaScript의 원리를 잘 알고 있어야하지만 다음 코드가 작동합니다. $(document).ready(function() { 그래서 당신은 단지 그들 중 하나를 필요에

$(document).ready(function(){ 
    var buildTicket = function(eventname,ticketprice,venueid,userid) { 
     $("#ticketwindow").append("<div class='ticket'>" + eventname + " - " + eventprice + "</div>"); 
    }); 
}); 
+0

나는 onclick = "buildTicket ('Some Show' '12 .00 ','1 ','2 '); "각 티켓에 대한 변수가 변경되기 때문입니다. 더 좋은 방법이 있습니까? –

+0

티켓 데이터 소스가 JSON 파일이라고 가정하고 jQuery 메서드 ['.getJSON()'] (http://api.jquery.com/jQuery.getJSON/)를 사용하여 'ticket'배열을 만듭니다. 사물. 각각의 경우에 대해 '

'을 렌더링하고 일반 클릭 이벤트 처리기를 모두 바인딩합니다. –

0

질문 : "데이터베이스에서 buildTicket() 변수를 채우는 것이 더 쉬울 것이라고 생각했습니다."

자바 스크립트에서 데이터베이스 데이터를 가져 오려면 HTTP 요청을하는 것이 좋습니다. 분명히 XMLHttpRequest를 사용하여 일반적인 XJAX 방식으로이 작업을 수행 할 수 있습니다. http://www.w3schools.com/xml/xml_http.asp 또는 JSH를 생성하기 위해 서버 측 코드를 호출하고 < 스크립트 > 태그에서 참조 할 수 있습니다. < 스크립트 유형 = "text/javascript"src = "../ js/jsonFromServerSideCode.JSP ">

관련 문제