使用jquery将页面上的所有价格从一种货币更改为另一种货币？

Question

我不需要使用 Yahoo Finance api 等。只需将数字乘以固定数量即可。

See codepen。下拉功能没有实现，我想先把交换放下。 我知道这只是一个开始，但是如何继续呢？这显然需要解决几个问题：

• 目前这会将每个值更改为相同
• 我需要能够在再次选择美元时将它们改回
• 不给出类名，而是自动查找所有价格（包含 $ 或 €）是否效率太低？

请您给我一些建议，我该怎么做？

$(document).ready(function() {
//  $('select').material_select();
  $('.caret').text(" ");
  //here starts my attempt for the exchange
  var price = $(".price").text().replace("$", "");
  var convertedToNumber = parseFloat(price);
  var eurPrice = convertedToNumber / 1.18;
  $(".price").text(eurPrice);


});

input.select-dropdown {
  color: #26a69a;
}
.caret {
  background:url("http://svgshare.com/i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">

  <div class="input-field col s1">
    <select>
          <option value="1" selected>USD</option>
          <option value="2">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<ul class="currencies">
  <li class="price">$1500</li>
  <li class="price">$2000</li>
  <li class="price">$342</li>
</ul>

Answer 1

您正在寻找的东西称为数据绑定，有很多库和东西可以为您提供它。

我假设你不知道我在说什么，我将向你解释基本概念是什么。

您有一组数据，在您的情况下是价格。

var prices = [
  1500,
  2000,
  342
];

那么你就有了货币汇率的对象

var rates = {
  USD: 1, // obviously
  EUR: 0.86
}

现在每次更改货币时，您都会重新计算价格并更新每次出现的情况。

function updatePrices(rate) {
  var elements = document.getElementsByClassName("price");

  prices.forEach((price, index) => {
    elements[index].innerHTML = price * rate
  });
}

document.getElementById("selector").onchange = function() {
  updatePrices(rates[this.value]);
}

并且最初也调用它。

updatePrices(rates.USD);

现在显然这是一种非常愚蠢的方法来绑定数据，使用数组索引和类名，但这是它背后的基本思想。

至于货币符号，将它们包括在内通常是个坏主意，因为实际上很少有货币具有它们，但想法是一样的。

var prices = [
  1500,
  2000,
  342
];


var rates = {
  USD: 1, // obviously
  EUR: 0.86
}

function updatePrices(rate) {
  var elements = document.getElementsByClassName("price");

  prices.forEach((price, index) => {
    elements[index].innerHTML = price * rate
  });
}

document.getElementById("selector").onchange = function() {
  updatePrices(rates[this.value]);
}


updatePrices(rates.USD);

<div class="row">
  <div class="input-field col s1">
    <select id="selector">
          <option value="USD" selected>USD</option>
          <option value="EUR">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<ul class="currencies">
  <li class="price"></li>
  <li class="price"></li>
  <li class="price"></li>
</ul>

Answer 2

由于您必须在汇率发生变化时更新价格，因此您可以有两套

数据属性

$(function() {
  $("#curr").on("change",function() {
    var curr   = this.value;
    var prefix = curr=="usd"; // or ["usd","yen",...].indexOf(curr); for more
    var sign   = curr=="usd"?"$":"€";
    $(".price").each(function(){
      $(this).text(
        (prefix?sign:"")   +
        $(this).data(curr) +
        (prefix?"":sign)
      );  
    })
  }).change();
});

input.select-dropdown {
  color: #26a69a;
}
.caret {
  background:url("http://svgshare.com/i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}
.currencies { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">

  <div class="input-field col s1">
    <select id="curr">
          <option value="usd" selected>USD</option>
          <option value="eur">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<br />Price 1
  <span class="price" data-usd="1,500" data-eur="1.271">$1,500</span>

<br />Price 2

<span class="price" data-usd="2,000" data-eur="1.702">$2,000</span>

<br />Price 3

<span class="price" data-usd="342" data-eur="291">$342</span>

显示和隐藏：

$(function() {
  $("#curr").on("change",function() {
    $(".currencies").hide();
    $("."+this.value).show();
  }).change();
});

input.select-dropdown {
  color: #26a69a;
}
.caret {
  background:url("http://svgshare.com/i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}
.currencies { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">

  <div class="input-field col s1">
    <select id="curr">
          <option value="usd" selected>USD</option>
          <option value="eur">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<ul class="currencies usd">
  <li class="price">$1,500</li>
  <li class="price">$2,000</li>
  <li class="price">$342</li>
</ul>
<ul class="currencies eur">
  <li class="price">1.276€</li>
  <li class="price">1.702€</li>
  <li class="price">291€</li>
</ul>

Answer 3

1. 您可以使用 CSS 类来代替使用 jquery 切换符号 （基于：how to add a dollar sign through css content）

   ul.dollar li:before {
     content: "\0024";
   }
   ul.euro li:before {
     content: "\20ac";
   }
   

2. 要更改每个值，您应该使用each

     $.each($(".price"), function(i, p) {
       var convertedToNumber = parseFloat($(p).text());
       var eurPrice = convertedToNumber / 1.18;
       $(p).text(eurPrice);
     });
   

在此处查看运行示例： https://codepen.io/anon/pen/oGZrpX