如何利用Data属性与JS对象修改无序列表内容？

安全阿岳

2026-8-18

动态更新滑块对应列表内容的修复方案

你当前的问题在于直接把JS对象赋值给impact.innerHTML，导致页面显示[object Object]，没法正确填充列表项。要解决这个问题，需要先获取每个带data-*属性的<li>元素，再根据滑块选中的值，把对应对象里的内容逐个填充进去。

步骤1：获取单个列表项元素

在JS开头添加以下代码，获取每个需要更新的列表项：

const milesItem = document.querySelector('[data-miles]');
const coalItem = document.querySelector('[data-coal]');
const wasteItem = document.querySelector('[data-waste]');

步骤2：修改滑块事件处理逻辑

把原来直接赋值impact.innerHTML的代码，替换成逐个给列表项赋值的逻辑：

var sbSlider = document.getElementById("location-range-slider");
var output = document.getElementById("value");
var cost = document.getElementById("monthly-cost");

// 获取单个列表项
const milesItem = document.querySelector('[data-miles]');
const coalItem = document.querySelector('[data-coal]');
const wasteItem = document.querySelector('[data-waste]');

output.innerHTML = "10";

sbSlider.oninput = function() {
  if (sbSlider.value === "1") {
    output.innerHTML = "10";
    cost.innerHTML = "$5";
    // 逐个填充内容
    milesItem.innerHTML = sbImpactTen.miles;
    coalItem.innerHTML = sbImpactTen.coal;
    wasteItem.innerHTML = sbImpactTen.waste;
  } else if (sbSlider.value === "2") {
    output.innerHTML = "50";
    cost.innerHTML = "$20";
    milesItem.innerHTML = sbImpactFifty.miles;
    coalItem.innerHTML = sbImpactFifty.coal;
    wasteItem.innerHTML = sbImpactFifty.waste;
  } else {
    output.innerHTML = "100";
    cost.innerHTML = "$40";
    milesItem.innerHTML = sbImpactHundred.miles;
    coalItem.innerHTML = sbImpactHundred.coal;
    wasteItem.innerHTML = sbImpactHundred.waste;
  }
}