Question

我正在尝试将“制作优惠”按钮添加到以下网页，以便人们可以点击并填写模式弹出窗体，然后通过电子邮件发送详细信息：http://www.colincooke.com/coinpages/pennies_offer.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>

这是用于制作模态弹出窗口并从单击按钮获取值的JavaScript / 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>

我想我已经设法为项目图片，描述和价格存储变量（我尝试了一个警报，它似乎工作）但我现在想要在显示的模态窗口中打印变量。 / p>

即。它说：

“您正在报价：itemDate，itemDescription，itemPrice”

模态弹出窗口在页面上使用此代码：

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

我尝试过使用：

 You are making an offer for:

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

但是出于对某人显而易见的原因，这不起作用。我想也许jQuery存储的变量可能在该代码之外不可用。如何在HTML模式窗体中的正确位置输出由itemDate，itemDescription和itemPrice存储的jQuery变量？

我用Google搜索“在HTML中打印jQuery变量”但找不到任何相关内容。这要么太明显，要么不可能？

任何帮助都将不胜感激。

非常感谢

Answer 1

如果我是你，我会在jquery文档中查找append / prepend函数。

http://api.jquery.com/append/

http://api.jquery.com/prepend/

Javascript / jQuery变量以HTML格式打印

1 个答案: