【问题标题】：Display price in HTML page based on selected currency根据所选货币在 HTML 页面中显示价格
【发布时间】：2021-06-05 22:33:06
【问题描述】：

我目前有两种主要货币用于我的业务。产品页面实际上是使用 HTML 构建的。我在一个页面中有 4 个产品，我想为每个产品显示两个价格，比如如果有人选择美元，将显示美元成本，如果有人选择欧元，那么它将相应地显示价格，而无需重新加载页面。我还希望在选择货币时更改订单链接。

请不要转换货币。我只想为每个产品存储两个不同的价格值，并在用户更改货币时相应地显示。

它不是任何基于 CMS 或电子商务的网站，只有几个 HTML 页面。我认为它可以使用 JS 来完成，但我不是程序员：/

谁能告诉我怎么做？我需要一个非常简单的程序，但我不知道从哪里开始。

这是产品定价部分的 HTML 源代码-

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>

<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>

<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">

<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">

<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">

<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<!--Begin Header-->
<div class="topbar">
  <div class="container">
    <div class="row"> 
      <!--Begin Social Icons-->
      <div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
        <div class="link"><a href="https://www.facebook.com/whmcsthemes" target="_blank"><i class="fab fa-facebook"></i></a></div>
        <div class="link"><a href="https://www.twitter.com/whmcsthemes" target="_blank"><i class="fab fa-twitter-square"></i></a></div>
        <div class="link"><a href="https://www.youtube.com/whmcsthemes" target="_blank"><i class="fab fa-youtube-square"></i></a></div>
        <div class="link"><a href="https://www.skype.com" target="_blank"><i class="fab fa-skype"></i></a></div>
      </div>
      <!--End Social Icons--> 
      <!--Begin Client Links-->
      <div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
        <div class="link xshide"><a href="#" role="button" data-toggle="modal" data-target=".modal-select-currency-content" id="modal-select-currency"><i class="fas fa-coins"></i>$ USD</a></div>
        <div class="link xshide"><a href="#" role="button" data-toggle="modal" data-target=".modal-select-language-content" id="modal-select-language"><i class="fas fa-globe"></i>Language</a></div>
        <div class="link"><a href="#" role="button" data-toggle="modal" data-target=".modal-client-login-content" id="modal-client-login"><i class="fas fa-lock"></i>Customers</a></div>
        <div class="link"><a href="#"><i class="fas fa-life-ring"></i>Support</a></div>
        <div class="link"><a href="#"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</a></div>
      </div>
      <!--End Client Links--> 
    </div>
  </div>
</div>
<!--End Header--> 

<!--Begin Web Hosting-->
<div class="webhosting">
  <div class="container">
    <div class="row"> 
      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Micro Hub</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1> $2<span class="subscript">.99</span></h1>
              <small>Per Month</small> </div>
            <table class="table">
              <tr>
                <td>1 GB Storage</td>
              </tr>
              <tr>
                <td>10 GB Bandwidth</td>
              </tr>
              <tr>
                <td>Unlimited Email</td>
              </tr>
              <tr>
                <td>Unlimited Databases</td>
              </tr>
              <tr>
                <td>Unlimited FTP Accounts</td>
              </tr>
              <tr>
                <td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel@2x.png 2x" class="img-fluid" /></td>
              </tr>
            </table>
          </div>
          <a href="#">
          <div class="panel-footer">Order Today</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 
      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Small Hub</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1> $7<span class="subscript">.99</span></h1>
              <small>Per Month</small> </div>
            <table class="table">
              <tr>
                <td>10 GB Storage</td>
              </tr>
              <tr>
                <td>100 GB Bandwidth</td>
              </tr>
              <tr>
                <td>Unlimited Email</td>
              </tr>
              <tr>
                <td>Unlimited Databases</td>
              </tr>
              <tr>
                <td>Unlimited FTP Accounts</td>
              </tr>
              <tr>
                <td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel@2x.png 2x" class="img-fluid" /></td>
              </tr>
            </table>
          </div>
          <a href="#">
          <div class="panel-footer">Order Today</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 
      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Big Hub</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1> $9<span class="subscript">.99</span></h1>
              <small>Per Month</small> </div>
            <table class="table">
              <tr>
                <td>20 GB Storage</td>
              </tr>
              <tr>
                <td>200 GB Bandwidth</td>
              </tr>
              <tr>
                <td>Unlimited Email</td>
              </tr>
              <tr>
                <td>Unlimited Databases</td>
              </tr>
              <tr>
                <td>Unlimited FTP Accounts</td>
              </tr>
              <tr>
                <td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel@2x.png 2x" class="img-fluid" /></td>
              </tr>
            </table>
          </div>
          <a href="#">
          <div class="panel-footer">Order Today</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 
</div></div></div>
<!--Libraries--> 
<script src="assets/libraries/jquery/jquery.min.js"></script> 
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script> 
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script> 
<script src="assets/libraries/wow/wow.min.js"></script> 
<script src="assets/libraries/zumada/sticky-header.min.js"></script> 
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script> 
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script> 
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script> 
<script src="assets/libraries/zumada/countdown.min.js"></script> 

<!--Custom Scripts--> 
<script src="assets/js/scripts.js"></script>
</body>
</html>

【问题讨论】：

通常这是使用 PHP 编程语言完成的。它在服务器上制作 HTML 页面，然后显示在浏览器中。然后在服务器上，PHP 将欧元、美元或任何货币显示在浏览器中。
你能提供一些带有产品和价格的 HTML，所以我们至少有一些工作要做吗？当然，如果你自己做这件事时至少表现出一些努力，那也是很好的。这就是 Stackoverflow 背后的想法。
货币之间的切换可以在浏览器中轻松完成（使用 JavaScript）。这将比再次从服务器请求更改的页面更快。

标签： html

【解决方案1】：

我没有足够的耐心等待您的 HTML 并简单地构建了这个“mvce”（最小可行且完整的示例）。

提供两种价格的方法有很多种。我通过价格<td>s中的数据属性选择了方式。

const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{ 
  tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
  cur=1-cur;
}
document.querySelector("button").onclick=change;
change()

.price {text-align:right}

<table>
  <tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
  <tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
  <tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
  <tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
  <tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
  <tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
  <tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
  </table>
  <button>change currency</button>

这是另一个示例，基于您的 HTML（我添加了 `data-pr="24.95 20.80" 属性）：

let cur=1;
document.querySelector("button").onclick=()=>{
  document.querySelectorAll(".the-price h1").forEach(h=>{
   let p=h.dataset.pr.split(" ")[cur].split(".");
   h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
   });
  cur=1-cur;
}

.subscript {font-size:1ex}

<div class="webhosting">
  <div class="container">
    <div class="row">

      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
        <div class="panel">
          <div class="panel-heading" style="background: #03989e">
               <a name="pricing"></a>
            <h3 class="panel-title">NVMe-1</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
              <small>Per Monthly</small> </div>
            <table class="table">
              <tr>
                <td>Product Description 1</td>
              </tr>
              <tr>
                <td>Product Description 2</td>
              </tr>
            </table>
          </div>
          <a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
          <div class="panel-footer">GET STARTED TODAY</div>
          </a> </div>
      </div>
      <!--End Plan Box--> 

      <!--Begin Plan Box-->
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown"  data-wow-delay="0.2s">
        <div class="panel">
          <div class="panel-heading"  style="background: #38b6ff ">
            <h3 class="panel-title">NVMe-2</h3>
          </div>
          <div class="panel-body">
            <div class="the-price">
              <h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
              <small>Per Monthly</small> </div>
            <table class="table">
               <tr>
                <td>Product Description 1</td>
              </tr>
              <tr>
                <td>Product Description 2</td>
              </tr>
            </table>
          </div>
          <a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
          <div class="panel-footer">GET STARTED TODAY</div>
          </a> </div>
      </div>
      <!--End Plan Box-->
    </div>
  </div>
</div>
<button>change currency</button>

【讨论】：

【解决方案2】：

您可以使用 Javascript 轻松完成此操作。您可以将定价存储在 JS 函数中，并在货币更改时返回实际存储的金额，而无需重新加载页面。

如果我能看到您的页面源代码，我将能够帮助您更好地解决这个问题。

【讨论】：

【解决方案3】：

HTML/CSS 解决方案

无需 JavaScript

在说，“这行不通”之前要考虑的几点

OP（O原始的Post）有太多的 HTML 被认为是非常有用的。典型的 Bootstrap 布局由 <div>s 组成，这些 <div>s 被 BS（Bootstrap）类包裹着更多相同的东西。

大部分 HTML 被删除，只有需要的部分被更多语义元素替换。最重要的是，交互元素<a> 被<input type='checkbox' hidden> 和<label> 取代。这种特殊变化有几个很好的理由：
- 复选框处于checked = true 或checked = false 两种状态之一。 CSS 伪类:checked 将改变<label> 的样式，以及它后面的所有<figure> 以及嵌套在每个<figure> 中的<sup>。默认情况下，(checked = false) 一切都是美元，选中时更改为欧元。
- 严格来说，<label> 的样式可以看起来像<button>、<a> 等，而复选框实际上具有hidden 属性。由于复选框有id='currency' 和<label> 有for='currency' 任何点击<label> 也是点击复选框（反之亦然，尽管在这种情况下它并不重要，因为复选框是隐藏的） .
重要提示：不应以将一个或多个元素放置在复选框和<label> 之间或插入任何<figure> 的方式更改HTML 布局。在它们周围、前面或后面添加任何东西应该没有问题。
所有<link>（谷歌字体除外）都指向相对路径（例如href='/path/to/style.css'），使它们毫无用处。我添加了 BS 类的样式具有高特异性，不能轻易被覆盖。我添加了 BS CSS，然后将自定义 CSS 的类加倍以增加它们的特异性以覆盖 BS CSS。

重要提示：唯一可以更改的是类的名称和任何 CSS 属性/值，但有一个例外是 content:。如果 CSS 放置在文件中（例如 style.css），请确保 CSS 规则集是最后一个。如果放在 <style> 中，请确保 CSS 规则集是最后的。
动态变化的文本依赖于以下内容：
1. :checked + label::before 将 {content: '?USD';... 更改为 '\a0€ EUR'
2. 对于复选框后面的所有 <figure>s，:checked ~ figure::before 将 {content: '?'attr(data-usd)... 更改为 €attr(data-eur)。
3. 对于所有 <sup>，:checked ~ figure > sup::before 将 {content: '.'attr(data-usd)... 更改为 '.'attr(data-eur)
4. 由于不涉及 JavaScript，因此这些值存储在每个 <figure> 和 <sup> data-usd 和 data-eur 属性上，并且必须手动编辑（如果我记得，这是 OP 要求的）
```
:checked ~ figure::before {content: '€\a0'attr(data-eur);...}

<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>
```

label.money.money {
  font-size: 2.5ch;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

label.money.money::before {
  content: '?USD';
}

#currency:checked+label.money.money::before {
  content: '\a0€ EUR';
}

figure.price.price {
  width: max-content;
  font-size: 4.75ch;
  font-weight: 500;
  line-height: 1.33;
}

figcaption.caption.caption {
  width: 100%;
  font-size: 0.3em;
  padding: 0 0 0 1.5em;
}

sup.cents.cents {
  vertical-align: middle;
  font-size: 0.6em;
  line-height: 0.7;
  margin-left: -.75ch;
}

figure.price.price::before {
  content: '?'attr(data-usd);
}

sup.cents.cents::before {
  content: '.'attr(data-usd);
}

#currency:checked~figure.price.price::before {
  content: '€\a0'attr(data-eur);
  padding-left: 0.3em;
}

#currency:checked~.price>sup.cents.cents::before {
  content: '.'attr(data-eur);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <input id='currency' class='btn-click' type='checkbox' hidden>
  <label class='money btn btn-link btn-lg' for='currency'></label>

  <figure class='price' data-usd='2' data-eur='4'>
    <sup class='cents' data-usd='99' data-eur='33'></sup>
    <figcaption class='caption'>Per Month</figcaption>
  </figure>

  <figure class='price' data-usd='7' data-eur='13'>
    <sup class='cents' data-usd='99' data-eur='33'></sup>
    <figcaption class='caption'>Per Month</figcaption>
  </figure>

  <figure class='price' data-usd='9' data-eur='16'>
    <sup class='cents' data-usd='99' data-eur='33'></sup>
    <figcaption class='caption'>Per Month</figcaption>
  </figure>

</body>

</html>

【讨论】：