JavaScript-更新多个 slider innerHTML

Question

我正在制作一个表格表单，用户将在其中调整表格中的多个 slider 。我想更新每个 slider 在屏幕上显示的值。我尝试使用 getElementsByClassName 来执行此操作，但当我调整一个 slider 时，输出值会显示在所有其他 slider 中。我想我可以为每个 slider 分配一个 id(大约有 20 个)，但我想知道是否有更有效的方法来做到这一点。

以下是表输入的 html 代码示例:

<form>
<table>
    <tr>
        <th rowspan="5" id="A"></th>
        <td></td>    
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>    
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>

    </tr>
    <tr>
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>    
        <td></td>
        <td><input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/><br />Current Value: <span class="sliderStatus">5</span></td>
    </table>
   </form>

和 JS 代码:

//called when the user clicks the start button on the home page.
function start(){
var decisionA = prompt("Enter A:","");
var decisionB = prompt("Enter B:","");

//send user prompt inputs to A and B cells in the table<th>.
document.getElementById('A').innerHTML = decisionA;
document.getElementById('B').innerHTML = decisionB;
}

function sliderChange (val){
     var sliders = document.getElementsByClassName('sliderStatus');
     for (i = 0; i < sliders.length; i++){
     sliders[i].innerHTML = val;
     }
   }

有没有办法让 slider 值文本使用 getElementsByClassName 为表中每个单独的 slider 显示调整后的 slider 值，或者我是否需要为所有 slider 分配 20 个不同的 id？谢谢。

Answer 1

好吧，这就是最终答案。但你真的应该学会调试自己的代码。否则，如果你所有的问题都在这里结束，你将永远无法完成你正在构建的任何东西。

#1 首先，您需要将 onChange="sliderChange(this.value)" 更改为 onChange="sliderChange(this)" 原因是当您将输入传递到 SliderChange() 时，您得到的只是一个值，而不是您正在触摸或使用的整个输入。当实际上您可能需要的远不止于此时，传递单一值并不明智。除了值之外，您还需要什么？您需要弄清楚哪些输入实际上已更改，而不仅仅是更改后的输入的值。您需要首先知道哪些输入已更改，以便您可以再次修改它并对其进行回调。因为输入的值不会告诉您有关输入实际已更改的任何信息，因此您可以再次将其更改回来。

#2 现在您终于有了输入数据，您需要弄清楚它是什么索引，因为它没有特定的 ID 来识别它，索引选项允许您基本上使用隐藏或计数的 ID。因此，您首先需要添加这行代码: var index = document.getElementsByTagName('input');

#3 最后，我们有了已更改的输入和需要修改的“sliderStatus”类。然后我们需要找出需要更改哪个“sliderStatus”。但问题是没有触及或修改“sliderStatus”类。因此，我们需要以某种方式将其链接到已修改为需要修改的范围的输入。幸运的是，这就是我们可以利用索引的地方，因为它们遵循相同的顺序，紧接着另一个，我们可以以相同的方式对它们进行计数并使用相同的索引。

for (i = 0; i < index.length; i++){
   if(e == index[i]){
      sliders[i].innerHTML = e.value;
   }
}

现在我们没有传递 val，而是通过 this 选项将整个 input 信息传递给 sliderChange()，我们现在可以将所有计数的索引与我们进行更改的实际索引进行比较。然后，当我们匹配时，我们才会更改某些内容并使用相同的索引来执行此操作。这就是我们现在才需要修改某些内容的值。因此，不要急于改变某些事情。在尝试改变之前，您首先需要弄清楚需要改变什么。然后使用 google 找出如何查找索引等。

function sliderChange(e){
   var index = document.getElementsByTagName('input');
   var sliders = document.getElementsByClassName('sliderStatus');

   for (i = 0; i < index.length; i++){
      if(e == index[i]){
         sliders[i].innerHTML = e.value;
      }
   }
}