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

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

数据属性

＆＃13;

$(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();
});

＆＃13;

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 }

＆＃13;

<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>

＆＃13;

显示和隐藏：

＆＃13;

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

＆＃13;

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 }

＆＃13;

<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>

＆＃13;

Answer 2

您正在寻找的是数据绑定，并且有很多库和内容可以为您提供。

我会假设你不知道我在说什么，我只是向你解释一下这个基本想法是什么。

您有一组数据，以您的价格为准。

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);

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

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用CSS类，而不是使用jquery切换符号（基于：how to add a dollar sign through css content）
```
ul.dollar li:before {
  content: "\0024";
}
ul.euro li:before {
  content: "\20ac";
}
```

要更改每个值，您应使用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

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

3 个答案: