2

到目前为止，我的大部分开发工作都在使用 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，但我对设置相应值的DRYinput方法非常不熟悉......假设我有以下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]);
    }
4

2 回答 2

1

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

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

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);
});
.slider {
    width: 200px;
    margin: 20px;
}
<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>

于 2015-11-13T11:08:44.127 回答
0

请原谅我恢复了这个相当老的线程，但是在 Redux 和类似状态管理库的这些日子里，我想提出一个替代解决方案，我在阅读了这篇文章等之后想出了一个替代解决方案。

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

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

于 2017-08-21T23:10:05.463 回答