根据所选货币以HTML页面显示价格
根据所选货币以HTML页面显示价格
提问于 2021-06-05 17:56:53
我目前的业务有两种主要货币。产品页面实际上是使用HTML构建的。我有4个产品在一个页面上，我想要显示每个产品的两个价格，例如，如果有人选择美元，成本在美元将显示，如果有人选择欧元，那么它将显示相应的价格，而不需要重新加载页面。我还希望订单链接被更改后，选择货币。
我不想兑换货币。我只想为每个产品存储两个不同的价格值，并在用户更改货币时相应地显示它。
它不是任何基于内容管理系统或eCommerce的网站，只是几个超文本标记语言页面。我认为这可以用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
Stack Overflow用户
发布于 2021-06-05 18:28:39
我没有足够的耐心等待你的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>
Stack Overflow用户
发布于 2021-06-05 18:17:33
您可以使用Javascript轻松完成此操作。您可以将定价存储在JS函数中，并在币种发生变化时返回实际存储的金额，而无需重新加载页面。
如果我能看到你的页面源代码，我将能够帮助你更好地解决这个问题。
Stack Overflow用户
发布于 2021-06-05 22:33:06
HTML/CSS解决方案
不需要JavaScript
指出在说 "It‘t Work"之前需要考虑的问题
- OP (Original Post)包含太多的超文本标记语言，不能被认为是非常有用的。典型的(Bootstrap)布局由大量的
<div>组成，BS Bootstrap类围绕着更多相同的类。
HTML的大部分被移除，只有需要的部分被更多的语义元素所取代。最重要的是，交互式元素<a>被<input type='checkbox' hidden>和<label>所取代。这种特殊变化有几个很好的原因：
- Checkboxes are in one of two states `checked = true` or `checked = false`. The CSS pseudo-class `:checked` will change the style of the `<label>`, and all of the `<figure>` following it as well as the `<sup>` nested within each `<figure>`. When in default, (`checked = false`) everything is USD and when checked is changed to EUR.
- Ascetically, the `<label>` can be styled to look like a `<button>`, `<a>`, etc. and the checkbox is actually has the `hidden` attribute. Since the checkbox has `id='currency'` and the `<label>` has `for='currency'` any click to the `<label>` is a click to the checkbox as well (and vise versa although it doesn't matter in this case since the checkbox is hidden).重要提示：不应以将一个或多个元素放置在checkbox和<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` changes `{content: 'USD';...` to `'\a0€ EUR'`
2. `:checked ~ figure::before` changes `{content: ''attr(data-usd)...` to `€attr(data-eur)` for all `<figure>`s that follow the checkbox.
3. `:checked ~ figure > sup::before` changes `{content: '.'attr(data-usd)...` to `'.'attr(data-eur)` for all `<sup>`
4. Since there's no JavaScript involved, the values are stored on each `<figure>` and `<sup>` `data-usd` and `data-eur` attributes and must be manually edited (which is what OP requested if I recall)：选中~ figure::before {content：‘EUR \a0’attr(data-EUR)；... }欧元欧元...欧元12.33
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67848367
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号