Question

到目前为止，我一直在使用jQuery进行大部分开发，而且我正在使用vanilla Javascript来更新NoUiSlider。

基本上我使用以下代码创建多个滑块：

function createSlider ( slide ) {
    noUiSlider.create(sliders[slide], {
        start: 0,
        connect: "lower",
        orientation: "horizontal",
        step: 1,
        range: {
            'min': 0,
            'max': 240
        }
    });
}

var sliders = $('.slider');
for ( var i = 0; i < sliders.length; i++ ) {
    createSlider(i);
}

这一切都很好，花花公子，我意识到我应该通过使用update来听取它的变化，但我对 DRY非常不熟悉设置相应input值的方法...让我们说我有以下HTML：

<div class="slider"></div>
<input type="text" value="0" />
<div class="slider"></div>
<input type="text" value="0" />
<div class="slider"></div>
<input type="text" value="0" />

如何在正在修改的滑块之后添加事件监听器来更新下一个input？

我假设我按照以下方式做了一些事情：

(howToTargetEachInput).addEventListener('change', function(){
    (howToTargetEquivilantSlider).noUiSlider.set(this.value);
});

但是我不知道如何使用重复的监听器而不使用一堆ID和诸如此类的东西。任何帮助表示赞赏。

在这里玩：http://jsfiddle.net/z83oz9np/9/

更新/解决方案

我编写了一个在创建滑块期间调用的绑定函数，如下所示：

    function bindValues(slider, input){
        slider.noUiSlider.on('update', function( values, handle ) {
            input.value = values[handle];
        });
        input.addEventListener('change', function(){
            slider.noUiSlider.set(this.value);
        });
    }
    var sliders = $('.slider');
    var inputs = $('input');
    for ( var i = 0; i < sliders.length; i++ ) {
        noUiSlider.create(sliders[i], {
            start: 0,
            connect: "lower",
            orientation: "horizontal",
            step: 1,
            range: {
                'min': 0,
                'max': 240
            }
        });
        bindValues(sliders[i], inputs[i]);
    }

Answer 1

如果您使用的是jQuery，那么它更容易坚持下去。

以下是如何实现这一目标的： -

＆＃13;

function createSlider (slide) {
    var slider = noUiSlider.create(sliders[slide], {
        start: 0,
        connect: "lower",
        orientation: "horizontal",
        step: 1,
        range: {
            'min': 0,
            'max': 240
        }
    });
    
    // add the slider object to the slider element
    // using data for future reference
    $(sliders[slide]).data('slider', slider);
    
    slider.on('change', function( values, handle ) {
        // on change of the slider, find the next element and set its value
        $(event.target).closest('.slider').next().val(values[handle])
    });
}

var sliders = $('.slider');
for ( var i = 0; i < sliders.length; i++ ) {
	createSlider(i);
}

$('.slider-input').change(function(){
   // on input change, get the slider from the previous element using data
   // now we have the slider object to call set.
   $(this).prev().data('slider').set(this.value);
});

＆＃13;

.slider {
    width: 200px;
    margin: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<link href="https://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet"/>

<div class="slider"></div>
<input type="text" class="slider-input" value="0" />
<div class="slider"></div>
<input type="text" class="slider-input" value="0" />
<div class="slider"></div>
<input type="text" class="slider-input" value="0" />

<p>How do I set up the inputs to reflect what the slider's value is...?</p>

＆＃13;

Answer 2

请原谅我复兴这个相当陈旧的线索，但在Redux和类似的州管理图书馆的这些日子里，我想提出一个替代解决方案，我在阅读这篇文章之后提出了。

这个想法是不将输入和滑块绑定在一起，而是使用它们来更新某些状态对象。然后，您希望在此状态下设置观察者，并在观察者函数中更新UI小部件，无论是noUiSlider，输入字段还是其他内容。这样，用于显示/编辑某些值的UI组件可以保持分离，并且只会改变一个单一的事实源状态对象。根据您的应用程序的大小和所涉及的小部件的数量/复杂性，这可能比上面给出的简单和有效的解决方案更好。

在我的情况下，我有一个Meteor应用程序，它使用多个x-editable输入小部件和noUiSlider滑块（每个模型变量一个输入字段和滑块），更新表面下的反应状态对象。 Meteor的依赖跟踪机制为我做了所有的观察/通知，所以它非常简单，但我想这可以在其他框架中使用一些观察者/可观察模式来完成......

NoUiSlider - 更新多个滑块的输入值

更新/解决方案

2 个答案: