javascript - 如何为 Meteor 事件创建另一个输入范围

Question

我的 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);
        }

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

Answer 1

模板:

您的每个 slider 都有一个唯一的 ID。此 ID 用于区分一个 slider 和另一个 slider 。

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

事件处理程序:

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

// 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的当前值