Question

这是我上一个问题的后续解答：Display text from list of variables

使用先前的解决方案，如何在一个页面上多次执行它？

这就是我所拥有的：

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

使用.each循环，然后使用this的实例

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

Answer 2

是的，您应该遍历元素，因为$(".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 3

请检查以下代码段。希望您正在寻找它。

keywords   sentence

altitude   sentence1.1
altitude   sentence1.2
range      sentence2.1
range      sentence2.2
range      sentence2.3
speed      sentence3.1
speed      sentence3.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]);
}

显示列表中的多个文本实例？

3 个答案: