javascript中的拆分數字以不同的字體大小顯示十進制數之后和之前

Question

我有一個計划頁面向我的客戶顯示我的網站產品的 3 個計划 - 基本、高級和 VIP，所有計划都有每月和每年的價格。

我從美國和印度的$products后端獲得以下值，該產品僅在這兩個國家/地區可用。 所以根據選擇的國家，我為我的客戶顯示價格

退回美國的產品：

$products = [
          {
            monthly_price => "\$5.95”,
            yearly_price => "\$40.95",
            type => "basic"
          },
          {
            monthly_price => "\$10.95”,
            yearly_price => "\$80.95",
            type => "premium"
          },
          {
            monthly_price => "\$15.95”,
            yearly_price => "\$120.95",
            type => "vip"
          },
]

為 IND 退回的產品：

$products = [
          {
            monthly_price => "\₹200.55",
            yearly_price => "\₹2500.55”,
            type => "basic"
          },
          {
            monthly_price => "\₹400.55",
            yearly_price => "\₹5000.55”,
            type => "premium"
          },
          {
            monthly_price => "\₹800.55",
            yearly_price => "\₹1000.55”,
            type => "vip"
          },
        ];

以下是 CSS 文件：

.main-price {
   font-size: 45px;
}

.decimal-price {
   font-size: 15px;
}

.term {
   font-size: 15px;
}

主要價格和十進制價格有不同的 CSS，我使用了下面的 class。 所以我在點 (.) 之后拆分，這將是 2 個值。 所以我按照 1 和 2 來做

以下是 HTML 文件：

[% FOR price in products -%]
    [% monthly_price = price.monthly_price.split('.') %]
    [% yearly_price = price.yearly_price.split('.') %]
    <h1>[% price.type.uc %]</h1>
    <p>
        <span class="main-price">[% monthly_price.1 %]</span>
        <span class="decimal-price">[% monthly_price.2 %]</span>
        <span class="term">per month</span>
    </p>
    <p>
        <span class="main-price">[% yearly_price.1 %]</span>
        <span class="decimal-price">[% yearly_price.2 %]</span>
        <span class="term">per year</span>
    </p>
[%- END %]

我也嘗試了以下 3 種不同的解決方案，但它不起作用：

• 解決方案1：

[% monthly_price.1 %]

• 解決方案2：

[% monthly_price[0] %]

• 解決方案3：

[% monthly_price.first %]

預期的：

• 我想以 45px 字體大小顯示主要價格，以 15px 字體大小顯示十進制價格/期限。

問題：

• 未顯示主要價格和小數價格

誰能幫助我哪里出錯了？

提前致謝

Answer 1

我正在檢查 javascript。 它工作正常。 但是你的代碼不是純 javascript。 所以，我不知道這種代碼。

檢查是否有 split() 支持。

 <script> var products = [ { monthly_price: "\$5.95", yearly_price: "\$40.95", type: "basic" }, { monthly_price: "\$10.95", yearly_price: "\$80.95", type: "premium" }, { monthly_price: "\$15.95", yearly_price: "\$120.95", type: "vip" }, ] products.forEach(price => { var res=price.monthly_price.split('.'); console.log(res[0]); console.log(res[1]); }); </script>