Показать несколько экземпляров текста из списка?

Question

Это продолжение моего предыдущего вопроса: Отображение текста из списка переменных

Используя предыдущее решение, как мне выполнить его несколько раз на одной странице?

Вот что у меня есть:

HTML & JQuery

<p>This is a price: <span class="price" data-cost="abc"></span>.</p>
<p>This is another price: <span class="price" data-cost="def"></span>.</p>

<script>
  var prices={
    "abc" : "$10",
    "def" : "$250"
  }
  var price_element=$(".price");
  var price_key = price_element.data('cost');
  price_element.text(prices[price_key]);
</script>

В настоящее время все цены отображаются как "$ 10", а не реагируют на стоимость данных.Буду ли я использовать какой-то цикл For или что-то еще?

Answer 1

Да, вам следует перебирать элементы, потому что $(".price") возвращает итеративную сущность элементов (не одного элемента), поэтому вы можете перебирать их с помощью .each() метода jQuery, например:

var prices = {
  "abc" : "$10",
  "def" : "$250"
}

$(".price").each(function() {
  var cost = $(this).data('cost');
  $(this).text(prices[cost]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a price: <span class="price" data-cost="abc"></span>.</p>
<p>This is another price: <span class="price" data-cost="def"></span>.</p>

Answer 2

Пожалуйста, проверьте приведенный ниже фрагмент.Надеюсь, вы ищете это.

var prices = {
    "abc" : "$10",
    "def" : "$250"
},
priceElement,
i;

priceElement= $(".price");

for (i = 0; i < priceElement.length; i++) {
    var elem = $(priceElement[i]),
        priceKey = elem.data("cost");
        
    $(elem).text(prices[priceKey]);
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>This is a price: <span class="price" data-cost="abc"></span>.</p>
<p>This is another price: <span class="price" data-cost="def"></span>.</p>

Answer 3

Используйте цикл .each, а затем экземпляр this

$(".price").each(function() {
    let cost = prices[$(this).data("cost")];
    $(this).text(cost);
});