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

问题描述

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

I don't need to use Yahoo Finance api or such. Simply multiply the numbers by a fixed amount.

请参见codepen .下拉功能未实现，我想先进行交换.我知道这只是开始，但是如何继续?显然，这需要解决几个问题:

See codepen. Dropdown functionality is not implemented, I want to have the exchange down first.I know this is just the start, but how to go on? This obviously needs several problems to be solved:

• 当前，这会将每个值更改为相同的值
• 我需要能够在再次选择美元时将其改回
• 不给出类名，而是自动查找所有价格(包含$或€)，效率太低吗?

请给我一些指示，我应该怎么继续?

Could you give me some pointers how should I go on, please?

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

推荐答案

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

Since you would have to update the prices whenever the exchange rate changed, you can have two sets

数据属性

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

这篇关于使用jQuery将页面上的所有价格从一种货币更改为另一种货币?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！