如何使用JQuery通过多组.on()输入滑块设置输出目标？

使用JQuery通过多组.on()输入滑块设置输出目标的方法如下：

首先，确保已经引入了JQuery库文件。
在HTML文件中，创建一个用于显示输出结果的目标元素，例如一个 <div> 元素，给它一个唯一的id，例如 "output"。

<div id="output"></div>

创建多个输入滑块元素，每个滑块都有一个唯一的id，并设置它们的初始值。

<input type="range" id="slider1" value="0">
<input type="range" id="slider2" value="0">
<input type="range" id="slider3" value="0">

在JavaScript代码中，使用JQuery的.on()方法来监听滑块的输入事件，并在事件发生时更新输出目标的内容。

$(document).ready(function() {
  // 监听滑块的输入事件
  $('#slider1, #slider2, #slider3').on('input', function() {
    // 获取每个滑块的值
    var value1 = $('#slider1').val();
    var value2 = $('#slider2').val();
    var value3 = $('#slider3').val();
    
    // 计算输出结果
    var result = parseInt(value1) + parseInt(value2) + parseInt(value3);
    
    // 更新输出目标的内容
    $('#output').text(result);
  });
});

在上述代码中，我们使用了多组选择器 #slider1, #slider2, #slider3 来同时选择多个滑块元素，并使用.on()方法监听它们的输入事件。在事件处理函数中，我们获取每个滑块的值，并进行相应的计算。最后，使用JQuery的.text()方法将计算结果更新到输出目标元素中。

这样，当任何一个滑块的值发生改变时，输出目标的内容会自动更新。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm