登录
首页 >  文章 >  前端

JS树形数据授权平台:动态展示及价格计算

时间:2025-02-27 22:39:24 339浏览 收藏

本文介绍如何使用JavaScript动态生成一个授权平台和期限选择界面,并实时计算价格。通过处理后台返回的树形数据(包含平台名称、期限、价格等信息),前端页面将动态展示授权平台选项和对应期限选项。用户选择后,系统会实时计算并显示最终价格。文中详细讲解了HTML结构搭建、JavaScript代码实现,包括数据处理、DOM操作及事件监听等,并提供了模拟数据及代码示例,方便读者理解和实践,最终实现一个交互性强的授权价格计算工具。 关键词:JavaScript, 树形数据, 授权平台, 期限, 价格计算, 动态展示

如何用JS动态展示基于树形数据的授权平台和期限,并计算价格?

使用JavaScript动态展示基于树形数据的授权平台、期限并计算价格

本文介绍如何利用JavaScript处理后台返回的树形数据,动态生成授权平台和期限选择列表,并根据用户选择实时计算最终价格。

数据结构

假设后台返回的数据结构如下:这是一个嵌套数组,每个元素代表一个授权平台,平台对象内包含多个期限对象。

  • 平台对象属性:

    • title: 平台名称 (字符串)
    • children: 期限对象数组
  • 期限对象属性:

    • id: 期限ID (数字)
    • platform: 所属平台ID (数字)
    • platform_title: 所属平台名称 (字符串)
    • years: 授权期限(年) (数字)
    • price: 授权价格 (数字)
    • address: 授权地址 (数字,例如:0-不限,1-一年,2-五年)
    • address_title: 授权地址名称 (字符串)
    • show_title: 显示价格 (字符串,例如 "¥100")

实现步骤

1. HTML结构:

创建一个基本的HTML结构用于显示授权平台、期限和价格:

const authorizationDiv = document.getElementById('authorization');
const priceSpan = document.getElementById('price');
const platformSelect = document.getElementById('platform');
const termSelect = document.getElementById('term');

// 模拟后台返回的树形数据
const platformData = [
  { title: "哔哩哔哩", children: [
      { id: 1, platform: 1, platform_title: "哔哩哔哩", years: 1, price: 100, address: 1, address_title: "一年", show_title: "¥100" },
      { id: 2, platform: 1, platform_title: "哔哩哔哩", years: 5, price: 400, address: 2, address_title: "五年", show_title: "¥400" }
    ]
  },
  { title: "微博", children: [
      { id: 3, platform: 2, platform_title: "微博", years: 1, price: 150, address: 1, address_title: "一年", show_title: "¥150" },
      { id: 4, platform: 2, platform_title: "微博", years: 5, price: 600, address: 2, address_title: "五年", show_title: "¥600" }
    ]
  }
  // ...更多平台数据
];


// 填充平台选择列表
platformData.forEach(platform => {
  const option = document.createElement('option');
  option.value = platform.title;
  option.text = platform.title;
  platformSelect.appendChild(option);
});

// 更新期限选择列表和价格
function updateTermSelectAndPrice() {
  const selectedPlatform = platformSelect.value;
  const platform = platformData.find(p => p.title === selectedPlatform);

  termSelect.innerHTML = ''; // 清空之前的选项

  if (platform) {
    platform.children.forEach(term => {
      const option = document.createElement('option');
      option.value = term.id;
      option.text = `${term.years}年(${term.address_title})`;
      termSelect.appendChild(option);
    });
  }

  // 设置默认价格
  priceSpan.textContent = "¥0.00";

  // 监听期限选择变化
  termSelect.addEventListener('change', () => {
    const selectedTermId = termSelect.value;
    const selectedTerm = platform.children.find(term => term.id == selectedTermId);
    priceSpan.textContent = selectedTerm ? selectedTerm.show_title : "¥0.00";
  });
}

// 监听平台选择变化
platformSelect.addEventListener('change', updateTermSelectAndPrice);

// 初始化
updateTermSelectAndPrice();

这段代码首先创建了HTML元素,然后根据模拟数据填充平台选择列表。updateTermSelectAndPrice函数根据选择的平台更新期限选择列表,并设置默认价格。最后,添加事件监听器来处理平台和期限的选择变化,并实时更新价格显示。 记得将模拟数据替换成你实际从后台获取的数据。

这个改进后的版本更清晰、易于理解和维护,并且更有效地处理了数据和用户交互。 它也避免了直接操作DOM元素的低效做法,提高了代码的可读性和可维护性。

文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《JS树形数据授权平台:动态展示及价格计算》文章吧,也可关注golang学习网公众号了解相关技术文章。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>