Question

我想动态更改此列表的文本：我的代码如下：

<ul style="list-style-type: none; width: 320px; margin-bottom: 0px; padding-left: 25px; padding-right: 0px; margin-right: 0px; text-align: justify; display: flex; justify-content:space-between;">
    <li id="li0" style="display: inline-block; font-size:10px;">None</li>
    <li id="li1" style="display: inline-block; font-size:10px;">Single</li>
    <li id="li2" style="display: inline-block; font-size:10px;">Double</li>
    <li id="li3" style="display: inline-block; font-size:10px;">Triple</li>
    <li id="li4" style="display: inline-block; font-size:10px;">Quadruple</li>
</ul>

<input id="quantitySlider1" class="slider" type="range" min="0" value="0" max="4" step="1" list="ticks1" style="width: 300px; margin-left: 25px; cursor: pointer;" oninput="">
<datalist id="ticks1">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>
<br>
<br>

我的javascript部分像：

if(sample[i].arrayLevels > 0){
 for (var j =0; j< sample[i]. arrayLevels; j++){
    var tempMod =  sample[i]. arrayLevels[j];
    var tempModName = tempMod.name;
  }
}

我想基于tempModName动态更改列表元素的文本。我只需要一个带有此列表元素文本的滑块。我之前是这样做的，而不是使用HTML。

innerHTML = innerHTML + '<ul style="list-style-type: none; width: 320px; margin-bottom: 0px; padding-left: 25px; padding-right: 0px; margin-right: 0px; text-align: justify; display: flex; justify-content:space-between;">' +
            '<li id="li5" style="display: inline-block; font-size:10px;">None</li>' +
            '<li id="li6" style="display: inline-block; font-size:10px;">Single</li>' +
            '<li id="li7" style="display: inline-block; font-size:10px;">Double</li>' +
            '<li id="li8" style="display: inline-block; font-size:10px;">Triple</li>' +
            '<li id="li9" style="display: inline-block; font-size:10px;">Quadruple</li>' +
            '</ul>';
    innerHTML = innerHTML + '<input id="quantitySlider' + h + '-' + i + '" class="slider" type="range" min="0" value="' + tempQty + '" max="' + maximum + '" step="1" list="ticks' + h + '-' + i + '" style="margin-left: 25px; width: 300px; cursor: pointer;" onchange="updateQuantityLabel(this.value, ' + h + ', ' + i + ')"><datalist id="ticks' + h + '-' + i + '"><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></datalist><br><br>';

Answer 1

您所要做的就是从滑块获取数字值，并将其传递到名称数组中作为索引以获取相应的单词。

此外，您确实应该使用CSS类而不是内联样式，如下所示。

// Get the list of <li> elements
let wordListItems = document.querySelectorAll("ul > li");

document.getElementById("quantitySlider1").addEventListener("change", function(){
  // Pass the value of the slider as an index to the <li> elements and get the text of the 
  // one corresponding list item.
  console.log(wordListItems[this.value].textContent);
});

.sliderLabels {
  list-style-type: none; 
  width: 320px; 
  margin-bottom: 0px; 
  padding-left: 25px; 
  padding-right: 0px; 
  margin-right: 0px; 
  text-align: justify; 
  display: flex; 
  justify-content:space-between;
}

.slider {
  width: 300px; 
  margin-left: 25px; 
  cursor: pointer;
}

ul > li {
  display: inline-block; 
  font-size:10px;
}

<ul class="sliderLabels">
    <li id="li0">None</li>
    <li id="li1">Single</li>
    <li id="li2">Double</li>
    <li id="li3">Triple</li>
    <li id="li4">Quadruple</li>
</ul>

<input id="quantitySlider1" class="slider" type="range" min="0" value="0" max="4" list="ticks1">
<datalist id="ticks1">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>

如何动态设置范围滑块标签的文本？

1 个答案: