根据所选货币在 HTML 页面中显示价格

时间：2021-06-05 09:56:53

标签： html

我目前有两种主要货币用于我的业务。产品页面实际上是使用 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>

3 个答案:

答案 0 :(得分：1)

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

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

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>

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

HTML/CSS 解决方案

无需 JavaScript

说之前要考虑的要点，“它不起作用”

  1. OP（O原始Post）的 HTML 太多，因此被认为非常有用。典型的 Bootstrap 布局由 <div> 组成，这些 <a> 被 BS（Boots 陷阱）类包住了更多相同的类.

    大部分 HTML 被删除，只有需要的内容被更多语义元素替换。最重要的是，交互元素 <input type='checkbox' hidden> 被 <label> 和 checked = true 取代。这种特殊变化有几个很好的理由：

    • 复选框处于 checked = false 或 :checked 两种状态之一。 CSS 伪类 <label> 将改变 <figure> 的样式，以及它后面的所有 <sup> 以及嵌套在每个 <figure> 中的 checked = false .默认情况下，(<label>) 一切都是美元，选中时更改为欧元。
    • 严格来说，<button> 的样式可以看起来像 <a>、hidden 等，并且复选框实际上具有 id='currency' 属性。由于复选框具有 <label> 并且 for='currency' 具有 <label>，因此对 <label> 的任何点击也是对复选框的点击（反之亦然，尽管它在这是因为复选框被隐藏了）。

    重要提示： HTML 布局不应以将一个或多个元素放置在复选框和 <figure> 之间或插入任何 <link> 的方式进行更改。在它们周围、前面或后面添加任何东西应该没有问题。

  2. 所有 href='/path/to/style.css'（Google 字体除外）都指向相对路径（例如 content:），使它们毫无用处。我添加了 BS 类具有无法轻易覆盖的高度特异性的样式。我添加了 BS CSS，然后将自定义 CSS 的类加倍以增加它们的特异性，以便覆盖 BS CSS。

    重要提示：唯一可以更改的是类的名称和任何 CSS 属性/值，只有一个例外是 style.css。如果 CSS 放在文件中（例如 <style>），请确保 CSS 规则集是最后一个。如果放在 :checked + label::before 中，请确保 CSS 规则集是最后一个。

  3. 动态变化的文本依赖于以下内容：

    1. {content: '?USD';... 将 '\a0€ EUR' 更改为 :checked ~ figure::before
    2. {content: '?'attr(data-usd)... 将复选框后的所有 €attr(data-eur) 的 <figure> 更改为 :checked ~ figure > sup::before。
    3. {content: '.'attr(data-usd)... 将所有 '.'attr(data-eur) 的 <sup> 更改为 <figure>
    4. 由于不涉及 JavaScript，因此值存储在每个 <sup> 和 data-usd data-eur 和 :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>
from hvplot.sample_data import us_crime

columns = ['Burglary rate', 'Larceny-theft rate', 'Robbery rate', 'Violent Crime rate']


us_crime.plot.violin(y=columns, group_label='Type of crime', value_label='Rate per 100k', invert=True)

相关问题
最新问题