如何为 Meteor 事件创建另一个输入范围答案

【问题标题】：How to create another input range to Meteor event如何为 Meteor 事件创建另一个输入范围
【发布时间】：2018-05-13 00:17:32
【问题描述】：

我的 HTML 中有这个元素

<div class="slider-wrapper">
        <input type="range" min="-10" max="100" value="1" step="0.01">
    </div>

还有我的 JS

  'input input[type="range"]': function(event, template) {
            var sliderVal = $( event.currentTarget ).val();
            Session.set('scaler', sliderVal);
            console.log("Slider: " + sliderVal);
        }

我尝试更改元素的类名，以便添加另一个映射到新事件的输入范围滑块，但它似乎不起作用。如何添加另一个，将 input[type="range"] 更改为 scale[type="range"] 并修改元素的类名将不起作用。

【问题讨论】：

您的问题似乎有点不清楚。请解释清楚，你到底想要什么。您是否暗示要基于第一个滑块添加多个滑块？
我只是想添加另一个独立的滑块和相应的事件。
那为什么不像第一个那样声明它呢？此外，您需要滑块上的唯一 id 来区分多个滑块。
我试过了，但我不知道如何编辑事件选择器以便单独行动。我是否需要从这个 input[type="range"] 到这个 scale[type="range"] <div class="slider-wrapper"> <input id="scale" type="range" min="-1" max="1" value="1" step="0.01"> </div> <div class="slider-wrapper"> <input id="offset" type="range" min="-1" max="1" value="1" step="0.01"> </div>

标签： javascript events meteor

【解决方案1】：

模板：

每个滑块都有一个唯一的 ID。这个 id 将告诉一个滑块与另一个滑块的区别。

<div class="slider-wrapper">
        <input type="range" min="-10" max="100" id="slider1" value="1" step="0.01">
        <input type="range" min="-10" max="100" id="slider2" value="1" step="0.01">
        <input type="range" min="-10" max="100" id="slider3" value="1" step="0.01">
</div>

事件处理程序：

一个单一的事件处理程序，负责拾取任何滑块上的更改。

// when anything in input[type="range"] changes, 

    'change  input[type="range"]' (event){

            console.log("id of the slider is: ", event.target.id);
            console.log("it's current value is: ", event.target.value);
            // set the id and it's value - which can be used later for whatever you want to do.
            Session.set(event.target.id, event.target.value);
    },

Session.get("slider1") ==> 获取slider1的当前值 Session.get("slider2") ==> 获取slider2的当前值 Session.get("slider3") ==> 获取slider3的当前值

【讨论】：

【解决方案2】：

好的，我好像错过了事件选择器的标签。

<div class="slider-wrapper">
        <input id="scale" type="range" min="-1" max="1" value="1" step="0.01">
    </div>
    <div class="slider-wrapper">
        <input id="offset" type="range" min="1" max="100" value="1" step="0.01">
    </div>

'input #scale[type="range"]': function(event, template) {
                var sliderVal = $( event.currentTarget ).val();
                Session.set('scaler', sliderVal);
                console.log("Slider: " + sliderVal);
            },

'input #offset[type="range"]': function(event, template) {
                var sliderVal = $( event.currentTarget ).val();
                Session.set('offset', sliderVal);
                console.log("Slider: " + sliderVal);
            }

【讨论】：

很好的尝试，我觉得你不需要为每个滑块声明一个事件监听器。一个将为许多人完成这项工作。 :)