在同一页面上动态显示不同区域设置的多种货币价格

Question

我正在尝试在通用/eu/网页上显示单个产品的不同价格。价格是固定的，所以我希望这可以使用简单的查询来完成，但我对 JS/JQuery 很陌生。

目前价格显示在div 中，类price-block用户可以用data-locale="{country code}"div 切换他们的区域设置。

使用这两个 ID，我可以创建一个脚本，例如data-locale="UK"那么价格是1000英镑？

我想我需要研究"如果选择这个，var 等于这个值"的解决方案 - 任何帮助非常感谢。

Answer 1

以下是分别使用简单的 key/val 对象作为区域设置/价格来实现它的一种方法：

$(function() {
var prices = {
"UK": "£1000",
"US": "$1500",
"DE": "€1250"
}
$("[data-locale]").click(function() {
var locale = $(this).attr("data-locale");
// ensure the locale value is valid
if (prices[locale]) {
$(".price-block").text(prices[locale]);
} else {
$(".price-block").text("Invalid locale: " + locale);
}
})
})

[data-locale] {
border: 2px solid;
cursor: pointer;
display: inline-block;
padding: 5px;
}
.price-block {
font-size: 20px;
margin-top: 10px;
}

<div class="locale-block">
<div data-locale="UK">UK</div>
<div data-locale="US">US</div>
<div data-locale="DE">DE</div>
</div>
<div class="price-block"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>