基于员工数量滑块范围动态设置cost_by_employee_count值的技术问询

实现思路 #

• 用数组定义员工数区间-成本的映射关系，便于后续维护和扩展
• 编写通用的成本计算函数，遍历映射数组匹配当前员工数所在区间，返回对应成本
• 在滑块初始化和值变化时，同步更新员工数显示和成本值

完整可运行示例 #

HTML 代码 #

<section <?php theme_section_attr_id() ?> <?php theme_section_attr_class( 'pb-5' ) ?>>
  <div class="container">
    <div class="row pt-5">
      <div class="col-md-8 showdow">
        <div class="row p-5 pb-0">
          <div class="pb-5">
            <p class="m-0 p-0">
              <strong>Number of Employees <span id="demo" style="float: inline-end;color: #00AFAB;"></span></strong>
            </p>
            <div class="slidecontainer">
              <input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp">
            </div>
            <p class="m-0 p-0">50 <span style="float: inline-end;">50,000</span></p>
            <!-- 新增成本显示元素，根据实际需求调整类型（比如隐藏input或显示用span） -->
            <p class="mt-3">
              <strong>Calculated Cost: <span id="cost_by_employee_count" style="color: #00AFAB;"></span></strong>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

JavaScript 代码 #

// 获取DOM元素
const slider = document.getElementById("myRange");
const employeeCountEl = document.getElementById("demo");
const costEl = document.getElementById("cost_by_employee_count");

// 定义员工数区间与成本的映射数组
const costMapping = [
  { min: 0, max: 499, cost: 3310000 },
  { min: 500, max: 1000, cost: 3290000 },
  { min: 1001, max: 5000, cost: 4870000 },
  { min: 5001, max: 10000, cost: 4330000 },
  { min: 10001, max: 25000, cost: 5460000 },
  { min: 25001, max: 100000, cost: 5420000 }
];

// 根据员工数计算并更新成本值
function updateCost(employeeCount) {
  // 遍历映射数组，找到匹配的区间
  const matchedItem = costMapping.find(item => {
    return employeeCount >= item.min && employeeCount <= item.max;
  });
  // 设置成本值（如果找到匹配项，否则可设置默认值）
  costEl.textContent = matchedItem ? matchedItem.cost : 'N/A';
  // 如果是隐藏input，用value属性：costEl.value = matchedItem ? matchedItem.cost : '';
}

// 初始化页面时设置初始值
employeeCountEl.textContent = slider.value;
updateCost(parseInt(slider.value));

// 滑块值变化时同步更新
slider.oninput = function() {
  const currentCount = parseInt(this.value);
  employeeCountEl.textContent = currentCount;
  updateCost(currentCount);
};

关键说明 #

• 映射数组costMapping可以根据需求随时调整区间和对应成本，无需修改核心逻辑
• 如果cost_by_employee_count是隐藏表单元素（比如<input type="hidden">），只需把costEl.textContent改成costEl.value即可
• 初始化时调用updateCost确保页面加载就有正确的成本值，避免初始状态为空

内容的提问来源于stack exchange，提问作者Beep