javascript - jQuery 对 slider 更改的 react

Question

所以我有表格数据 HTML 元素，我想反射(reflect) slider 具有的任何值。

<td id="firstBox"></td>
<td>
    <div class="sliderHolder">
        <input type="range" min="1" max="10" step="1" id="first">
    </div>
</td>

现在，当我使用普通的 JavaScript 代码时，我可以更改 #firstBox 的值

firstSlider.oninput = function(){
    document.getElementById("firstBox").innerHTML = this.value;
}

但是当我尝试使用 jQuery 时，我什么也做不了(甚至不能放置一个简单的静态 int 或字符串值)

firstSlider.oninput = function(){
    $("#firstBox").val(this.value);
}

ps.:即使为 HTML 元素提供 name 属性也无济于事

Answer 1

td 元素没有值。请改用 text()。

jQuery(function($) {
  $('#first').on('input', function() {
    $("#firstBox").text(this.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="firstBox">5</td>
    <td>
      <div class="sliderHolder">
        <input type="range" min="1" max="10" step="1" id="first" value="5" />
      </div>
    </td>
  </tr>
</table>