在HTML标签中显示Javascript变量

时间:2014-01-08 12:35:33

标签: javascript html variables label show

我在网站上有这个商业广告。

http://img89.imageshack.us/img89/5157/mv8k.png(图片)。

此广告包含价格信息,这些价格是javascript变量。我想在更新变量值时自动更新价格(价格在红色字体“Desde”和“Bs。”之间)。

显示这些标签的html如下:

    <ul style="list-style-type:circle; margin-top:0px;">
      <li><a href="http://printoriente.com/tarjetas-presentacion/">Tarjetas de presentaci&oacute;n</a><label class="printoriente-label"> - Desde </label><label class="printoriente-tp-price"></label><label class="printoriente-label">Bs.</label></li>
      <li><a href="http://printoriente.com/afiches/">Afiches</a><label class="printoriente-label"> - Desde </label><label class="printoriente-label-price"></label><label class="printoriente-label">Bs.</label></li>
      <li><a href="http://printoriente.com/volantes/">Volantes</a><label class="printoriente-label"> - Desde </label><label class="printoriente-label-price"></label><label class="printoriente-label">Bs.</label></li>
      <li><a href="http://printoriente.com/fotos/">Fotos</a><label class="printoriente-label"> - </font>Desde <label class="printoriente-label-price"></label><label class="printoriente-label">Bs.</label></li>
    </ul>
  </div>
  <p style="padding-left:20px; font-size:12px; margin-top:20px;"> Vis&iacute;tanos y ver&aacute;s lo f&aacute;cil que es dise&ntilde;ar!</p>
</div>

<script>
$.getJSON( "http://api.printoriente.com/price/tarjetas-presentacion", function( data ) {
  console.log(data.refPrice);
});
$.getJSON( "http://api.printoriente.com/price/afiches", function( data ) {
  console.log(data.refPrice);
});
$.getJSON( "http://api.printoriente.com/price/volantes", function( data ) {
  console.log(data.refPrice);
});
$.getJSON( "http://api.printoriente.com/price/Fotos", function( data ) {
  console.log(data.refPrice);
});
</script>

价格在“data.refPrice”变量中。我想仅使用“printoriente-label-price”类在标签中显示这些变量。我在javascript中调查了一些关于“.each”和“.find”的内容,我不知道它是不是一个解决方案。

我用ids做了它,但它与网站的其他部分产生冲突。我必须用其他方法做到这一点,我想到了类似的东西。

问候。

1 个答案:

答案 0 :(得分:0)

这样做的最佳方式是使用ID。它不应该与任何东西冲突,只要你不使用相同的id两次。另一种方法是通过它的类调用元素,但是你必须通过它的索引来引用,如:

$.getJSON( "http://api.printoriente.com/price/tarjetas-presentacion", function( data ) {
    $(document).find(".printoriente-label-price")[0].html(data.refPrice);
});
$.getJSON( "http://api.printoriente.com/price/afiches", function( data ) {
    $(document).find(".printoriente-label-price")[1].html(data.refPrice);
});
$.getJSON( "http://api.printoriente.com/price/volantes", function( data ) {
    $(document).find(".printoriente-label-price")[2].html(data.refPrice);
});
$.getJSON( "http://api.printoriente.com/price/Fotos", function( data ) {
    $(document).find(".printoriente-label-price")[3].html(data.refPrice);
});