jQuery 对滑块变化的反应

Question

所以我有表格数据 HTML 元素，我想反映滑块具有的任何值。

<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 或 string 值）

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

ps.：即使给 HTML 元素一个 name 属性也没有帮助

Answer 1

.innerHTML的 jQuery 等价物是.html()方法。 现在您正在将this.value添加到#firstBox元素的value属性。

所以试试这个。

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

Answer 2

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>

Answer 3

在第一个示例（vanilla JavaScript）中，您直接设置#firstBox 的innerHTML，而在第二个示例中，您正在设置#firstBox 值。 这是不对的，因为 firstBox 不是输入，所以它没有真正的价值。

要使用 jQuery 设置它的内部 html，你应该做这样的事情

$('#firstBox').html(this.value);

Answer 4

HTML5 只处理 min 和 max 属性之间的一个值。 如果你想在一个 UI 输入中处理一个最小值和一个最大值，你可以使用 jQueryUI 的滑块： https ://jqueryui.com/slider/#range

 var value = $("input[type=range]").val(); $('#val').html(value)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="range" min="1" max="10" value="7" step="1" id="first"> <p id="val"></p>