Отображать переменные JavaScript в метке HTML

Question

У меня есть этот рекламный ролик на веб-сайте.

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". Я исследовал кое-что о ".each" и ".find" в javascript, я не знаю, может ли это быть решением.

Я сделал это с идентификаторами, но это создает конфликты с остальной частью веб-сайта. Я должен сделать это другим способом, мне пришло в голову что-то подобное.

С уважением.

Answer 1

Лучший способ сделать это - использовать идентификаторы. Это не должно конфликтовать ни с чем, если вы не используете один и тот же идентификатор дважды. Другой способ - вызвать элемент по его классу, но тогда вам нужно будет ссылаться по его индексу, например:

$.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);
});