用相同的类替换元素中的文本

Question

我在一个页面中有一些产品

<p class="wt-text-title-01">
   <span class="wt-screen-reader-only">
   Sale Price USD 5
   </span>
   <span aria-hidden="true">
   <span class="currency-symbol">USD </span><span class="currency-value">5</span>
   </span>
</p>

我共有 36 种不同价格的产品。我想浏览每一种产品，并用我拥有的货币符号转换货币，并将美元值乘以检测到的货币的汇率。

我有这个代码

var request = new XMLHttpRequest();

let exchange_rate = 1;

request.open('GET', 'https://api.ipdata.co/?api-key=apikey');

request.setRequestHeader('Accept', 'application/json');

const http = new XMLHttpRequest();


request.onreadystatechange = function () {

    if (this.readyState === 4) {
        console.log(this.responseText);
        let data = JSON.parse(this.responseText);
        let currency = data.currency.code;

        if (currency == 'USD') {
            exchange_rate = 1;
        }
        if (currency == 'EUR') {
            exchange_rate = 1.28;
        }
        if (currency == 'GBP') {
            exchange_rate = 0.73;
        }
        if (currency == 'CAD') {
            exchange_rate = 0.78740;
        };
        $('.currency-symbol').text(currency);
        let v = $('.currency-value').val();

        $('.currency-value').each(function (i, obj) {
            let cv = parseInt($('.currency-value').text()) * exchange_rate;
            $('.currency-value').text(' ' + cv);
        });

    }
};

request.send();

我可以更改所有 36 种产品的货币符号，但货币转换似乎不起作用。由于每个类别都有不同的价值，我如何为每个产品设置正确的转换货币金额？

Answer 1

当循环货币值而不是再次调用选择器时，请使用obj，例如：

$('.currency-value').each(function (i, obj) {
    let cv = parseInt($(obj).text()) * exchange_rate;
    $(obj).text(' ' + cv);
});

Answer 2

实现您所需的最简单方法是创建一个包含汇率的对象，并以货币代码为键。然后，您可以简单地根据 API 响应中的code 检索该值，并执行汇率计算。

还要注意在以下示例中使用text() 而不是val()，因为div 元素没有value 属性。

最后，也是最重要的，鉴于您使用的汇率，您需要在计算中除除以该汇率。

说了这么多，试试这个：

// note updated to be more accurate based on todays prices
let exchangeRates = {
  'USD': 1,
  'EUR': 1.17,
  'GBP': 1.37,
  'CAD': 0.7874
}

// mock response from AJAX call. Irrelevant properties removed.
let responseText = {
  "currency": {
    "name": "Euro",
    "code": "EUR",
    "symbol": "€",
    "native": "€",
    "plural": "Euros"
  }
}

// inside your XMLHttpRequest onreadystatechange handler:
$('.currency-symbol').text(responseText.currency.symbol);
$('.currency-value').text((i, t) => (t / exchangeRates[responseText.currency.code]).toFixed(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="wt-text-title-01">
  <span class="wt-screen-reader-only">Sale Price USD 5</span>
  <span aria-hidden="true">
    <span class="currency-symbol">USD</span>
  <span class="currency-value">5</span>
  </span>
</p>
<p class="wt-text-title-01">
  <span class="wt-screen-reader-only">Sale Price USD 10</span>
  <span aria-hidden="true">
    <span class="currency-symbol">USD</span>
  <span class="currency-value">10</span>
  </span>
</p>
<p class="wt-text-title-01">
  <span class="wt-screen-reader-only">Sale Price USD 15.99</span>
  <span aria-hidden="true">
    <span class="currency-symbol">USD</span>
  <span class="currency-value">15.99</span>
  </span>
</p>

Answer 3

我对 jQuery 和所有的东西都不是很熟悉，但你不应该做这样的事情吗：

obj.textContent = ' ' + cv;

而不是这个：

$('.currency-value').text(' ' + cv);