JavaScript-更新多个滑块 innerHTML

Question

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

这是 table 输入的 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;
     }
   }

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

Answer 1

是的，它输出给所有的人，因为他们都有相同的 class 'SliderStatus'，因此您正在调用 SliderChange() 中的脚本 return再次获取所有 'sliderStatus' classes 的状态。您需要关注一个特定输入的一个特定变化。您可以通过在 JS 中使用 THIS 轻松实现这一点。 jQuery 示例：

$('sliderStatus').change(function(){
   $(this).val();
});

这只是一个简单的示例，说明如何在不使用 onClick 等的情况下以不同的方式检索数据。您可能会弄清楚其余部分。

另一个例子是你可以遍历每一个滑块并随时更改它们..

$('sliderStatus').each(function(){
   $(this).val();
});

此方法允许您同时检查所有这些。希望这对您学习更多 JS 有所帮助。

Answer 2

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

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

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

#3 最后，现在我们有了已经更改的输入和我们需要修改的 'sliderStatus' class。然后我们需要找出需要更改的 'sliderStatus' 。但问题是没有'sliderStatus' class 被触及或修改。因此我们需要link它以某种方式将已修改的输入转换为需要修改的跨度。幸运的是，这就是我们可以使用索引的地方，因为它们遵循相同的顺序，紧接着一个，我们可以用相同的方式计算它们并使用相同的索引。

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;
      }
   }
}

JavaScript-更新多个滑块 innerHTML

JavaScript-updating multiple slider innerHTML

html

javascript

slider

innerhtml

sliders