2010-06-21 2 views
1

사람들이 클릭하여 모달 팝업 양식을 작성한 다음 세부 정보를 전자 메일로 보낼 수 있도록 다음 웹 페이지에 "쿠폰 만들기"버튼을 추가하려고합니다.Javascript/jQuery 변수가 HTML로 인쇄됩니다.

모달은 잘 작동하지만 HTML에서 출력 할 변수를 얻지 못하는 것 같습니다. 이 페이지에서

테이블 행에 대한 HTML 코드입니다 :

<tr> 
<td></td> 
    <td class="date">1967</td> 
    <td class="desc">(F257 Dies 3+J. S4157). BU Full Lustre</td> 
    <td class="price">&pound;0.20</td> 
    <td class="nogrey"><a href="http://ww6.aitsafe.com/cf/add.cfm?userid=8935970&product=Item+714.+1d+1967+BU+Full+Lustre&price=0.20&return=http%3A%2F%2Fwww.colincooke.com%2Fcoinpages%2Fpennies.html" target="_self"><div class="cart-button"></div></a><a href="#dialog1" name="modal"><div class="offer-button"></div></a></td> 
</tr> 

그리고 이것은 모달 팝업을하고 버튼을 클릭에서 값을 얻을 수있는 자바 스크립트/jQuery 코드입니다 - 모달 물건이 아닌 내 - 코드 변수를 저장하는 유일한 물건 (아마 더 우아한 수 :

<script type="text/javascript"> 
$(document).ready(

function() 
{ 
    $.localScroll(); 
    $("table.stocktable a.coinpic").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); 

    $("div.offer-button").click(function(){ 

    // add item text to variables 


           // THIS IS MY (amateur!) CODE BLOCK BELOW: 

    var itemDate = $(this).parent().parent().parent().children("td.date").text(); 
    var itemDescription = $(this).parent().parent().parent().children("td.desc").text(); 
    var itemPrice = $(this).parent().parent().parent().children("td.price").text(); 
    }); 

            // Is there a better/more direct way of doing the above? It currently works - but could be neater I think. 


    // MODAL BELOW 
    //select all the a tag with name equal to modal 
$('a[name=modal]').click(function(e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    //Get the A tag 
    var id = $(this).attr('href'); 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set heigth and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect 

    $('#mask').fadeTo("medium",0.8); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 

    //transition effect 
    $(id).fadeIn(250); 

}); 

//if close button is clicked 
$('.window .close').click(function (e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    $('#mask').hide(); 
    $('.window').hide(); 
}); 

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
}); 




} 
); 
</script> 

은 내가 변수가 항목의 사진, 설명 및 가격 저장 얻을 관리했습니다 생각 (I 경고를 시도하고 보였다)하지만 지금은 모달 변수를 출력하고 싶습니다. 승자가 나타납니다. 그것은 즉

는 말한다 :

<div id="boxes"> 
<!-- Start of Login Dialog --> 
<div id="dialog1" class="window"> 
    <div class="d-header"> 

    //I entered this message 
    You are making an offer for: 

    <input type="text" value="username"/><br/> 
    <input type="password" value="Password" />  
    </div> 
    <div class="d-blank"></div> 
    <div class="d-login"><input name="Login" type="button" value="Login" /></div> 
</div> 
<!-- End of Login Dialog --> 
</div> 
: 모달 팝업 페이지에이 코드를 사용

:

는 "itemDate, itemDescription, itemPrice 당신이 제안을하고있다"

그리고 사용 해보 았습니다 :

You are making an offer for: 

<script language="javascript"> 
document.write (itemDate); 
</script> 

하지만 누군가에게 명백한 이유 때문에이 방법은 효과가 없습니다. 어쩌면 jQuery에 의해 저장된 변수가 해당 코드 외부에서 사용 가능하지 않을 수도 있습니다. itemDate, itemDescription 및 itemPrice에 의해 저장된 jQuery 변수를 HTML 모달 양식의 올바른 위치에있는 HTML 코드로 출력하려면 어떻게합니까?

나는 "HTML에서 jQuery 변수 인쇄"를 검색했지만 관련된 내용을 찾을 수 없습니다. 이것은 너무 명백하거나 불가능합니다.

도움을 주시면 감사하겠습니다.

많은 감사 나는 JQuery와 설명서의 APPEND/앞에 추가 기능을 찾아 볼 것이다 당신이라면

답변

2
+0

좋아, 그래서 나는 쓰레기 해요,하지만 내가 뭘하려하고 나는 그것이 기본 기능인 자바 스크립트를 알고 있지만 헤이, 내가 leraning 해요 :

당신이 제안을하고 있습니다 :

작동하지 않습니다. 변수 itemDate를 추가하려면 어떻게해야합니까? (즉, 어떻게 정확하게 참조해야합니까?) 링크를 제공해 주셔서 감사합니다. 문서를 좋아합니다! – alsheron

+0

도이 시도 :

alsheron

+0

좋아, 내가 그것을 고정 된 생각 : 필요한 : $ (문서) .ready을 ( \t \t 기능() \t { 와 닫는 비트 이 항상 jQuery를 변수를 참조 할 필요가있다.? 또는 그들을 세계적으로 선언하는 방법이 있습니까? – alsheron

관련 문제