Question

我正在制作一个表格，用户将调整表格中的多个滑块。我想更新每个滑块在屏幕上显示的值。我尝试使用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？感谢。

Answer 1

是的，它输出到所有这些，因为它们都具有相同的类'SliderStatus'，因此您调用的脚本SliderChange()再次获得所有{{1}的状态类。您需要关注一个特定输入中的一个特定更改。您可以通过在JS中使用THIS轻松实现这一目标。 jQuery示例：

'sliderStatus'

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

另一个例子是，您可以在每个滑块上移动并随时更改它们。

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

此方法允许您同时检查所有这些方法。希望这有助于你学习更多JS的方式。

Answer 2

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

＃1 首先，您需要将onChange="sliderChange(this.value)"更改为onChange="sliderChange(this)"，原因是您将输入传递到SliderChange()时，然后你得到的只是一个值，而不是你正在触摸或使用的整个输入。如果实际上你可能需要更多的东西，那么传递一个单一的价值并不聪明。你需要的不仅仅是一个价值？您需要确定实际更改了哪些输入，而不仅仅是更改输入的值。您首先需要知道哪些输入已被更改的原因是您可以再次修改它并回拨它。因为您输入的值并未告诉您有关实际更改了哪些输入的信息，所以您可以再次将其更改。

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

＃3 最后，我们既有已更改的输入又有＆＃39; sliderStatus＆＃39;我们需要修改的类。然后我们需要找出哪个＆＃39; sliderStatus＆＃39;需要改变。但问题是没有＆＃39; sliderStatus＆＃39;课程已被触及或修改。因此，我们需要以某种方式将其链接到已修改为需要修改的范围的输入。 Luckelly，我们可以利用索引，因为它们遵循相同的顺序，一个接一个，我们可以用相同的方式计算它们并使用相同的索引。

＆＃13;

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

＆＃13;

＆＃13; 现在，我们没有将val，但整个input信息通过this选项传递到sliderChange()，我们现在可以将所有计算的索引与我们改变了的实际指数。然后当我们有匹配时，我们才会改变一些东西，然后我们使用相同的索引来做。而这正是我们现在才最终需要我们需要修改某些东西的价值的地方。所以不要急于改变一些事情。首先，您需要在尝试更改之前弄清楚需要更改的内容。然后使用谷歌找出如何查找索引等。

＆＃13;

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

＆＃13;

JavaScript更新多个滑块innerHTML

2 个答案: