2

我正在制作表格，用户将在表格中调整多个滑块。我想为每个滑块更新要在屏幕上显示的值。我尝试使用 来执行此操作getElementsByClassName，但是当我调整一个滑块时，输出值会显示在所有其他滑块中。我想我可以为每个滑块分配一个 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;
     }
   }

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

4

2 回答 2

1

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

#1首先，您需要更改onChange="sliderChange(this.value)"to 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，而是将整个input信息槽this选项传递给sliderChange()，我们现在可以将所有计数的索引与我们进行更改的实际索引进行比较。然后当我们有一个匹配时，我们才改变一些东西，我们使用相同的索引来做。这就是我们现在最后才需要我们需要修改某些东西的价值的地方。所以不要急于改变一些东西。首先，在尝试更改之前，您需要弄清楚需要更改的内容。然后使用谷歌找出如何找到索引等。

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

于 2018-01-07T13:27:44.177 回答
0

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

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

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

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

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

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

于 2018-01-07T05:16:01.523 回答