Question

我一直在寻找这一天 - 从下拉菜单中选择国家或货币时，在整个页面中更改货币。

我基本上需要的是一个显示国家或货币的下拉菜单。当你选择像USD这样的任何一个时，整个页面的所有价格都会变成美元。现在，如果您更改它AUD / CAD / PKR等，它们将相应地更改。我基本上需要它在Javascript中，但如果有人可以用PHP提供它，它也没关系。

这方面的一个很好的例子是：http://creativeon.com当您从右上方的下拉菜单更改货币时 - 它会更改主要内容中所有包的货币。

我是一名HTML开发人员，对javascript了解不多。请帮我。

P.S。我也搜索了codingforums.com，发现只有两个链接不是我用的，因为它们是货币转换器：

Answer 1

webapps的美妙之处在于，你可以通过查看源代码（使用像FF中的Firebug插件这样的收费）借用好的想法。正如您在示例中所看到的，您提到在选择其他货币时重新加载页面：

$('#Items, #Items_input').change(function(){
    $.post('/conlogic/ajax.php?action=currency',
        {'curr': $(this).val()},
        function(data){
            if ( data=="OK" ) window.location.reload();
        });
});

显然，在这种情况下，页面将使用不同的货币重新呈现服务器端。

Answer 2

我写了一个javascript版本。没有Ajax，货币兑换率是从谷歌借来的。

HTML代码

  <select id="currencySelector">
    <option value="usd">USD</option>
    <option value="aud">AUD</option>
    <option value="eur">EUR</option>
    <option value="gbp">GBP</option>
  </select>
  <div class="currency" data-currencyName="usd">15<span>USD</span></div>
  <div class="currency" data-currencyName="eur">15<span>EUR</span></div>
  <div class="currency" data-currencyName="gbp">15<span>BGP</span></div>
  <div class="currency" data-currencyName="aud">15<span>AUD</span></div>

Javascript代码

var 
    selector = document.getElementById("currencySelector");
var
    currencyElements = document.getElementsByClassName("currency");
var 
    usdChangeRate = {
      AUD: 1.0490, // 1AUD = 1.0490 USD
      EUR: 1.4407, // 1EUR = 1.4407 USD
      GBP: 1.6424,
      USD: 1.0
    };

selector.onchange = function () {
    var 
        toCurrency = selector.value.toUpperCase();

    for (var i=0,l=currencyElements.length; i<l; ++i) {
        var 
            el = currencyElements[i];
        var 
            fromCurrency = el.getAttribute("data-currencyName").toUpperCase();

      if (fromCurrency in usdChangeRate) {
          var 
              // currency change to usd
              fromCurrencyToUsdAmount = parseFloat(el.innerHTML) * usdChangeRate[fromCurrency];
          var 
              // change to currency unit selected
              toCurrenyAmount = fromCurrencyToUsdAmount / usdChangeRate[toCurrency];

          el.innerHTML = toCurrenyAmount + "<span>" + toCurrency.toUpperCase() + "</span>";
          el.setAttribute("data-currencyName",toCurrency);
      }
    }
};

运行代码

您可以在http://jsbin.com/ewuyoq/5运行上面的代码，也可以构建自己的版本http://jsbin.com/ewuyoq/5/edit

Answer 3

我会使用jQuery，所以如果你不想使用外部库，请随意忽略我的答案。它可以在www.jquery.com上找到。

首先，您为所有应更改货币的地方设置一个范围，将其命名为“currency”，并在name属性中将值设置为“基础货币”。例如：

<span class="currency" name="499"> 499 </span>

然后你可以做一个按钮，说它有id“showInEuro”。

<input type="button" id="showInEuro" />

然后编写一些与此类似的jQuery代码：

var usdToEuroExchRate = 1.5; // Obviously just a magic constant

// When the button is clicked
$("#showInEuro").click(function() {
     // Iterate through all of the currency spans
    $("span.currency").each(function(index) {
        // And take their names times the exchangerate and put it in the span.
        $(this).text($(this).attr("name") * usdToEuroExchRate);
    });
});

当然，您应该尝试使用真实的实时汇率。

我为你做了一个JSFiddle：http://jsfiddle.net/An3v9/9/

Javascript代码：使用下拉HTML动态更改货币

3 个答案: