Question

我正在使用此fiddle在我的网站上显示2个价格区间滑块。问题是，当我添加第二个范围滑块时，第一个滑块不再起作用。

我使用的js代码是：

// Range 1
var clbk = document.querySelector('.value1');
var initClbk = new Powerange(clbk, { callback: displayValue, start: 20 });
function displayValue() {
  document.getElementById('slider1').innerHTML = clbk.value;
}

// Range 2
var clbk = document.querySelector('.value2');
var initClbk = new Powerange(clbk, { callback: displayValue, start: 40 });
function displayValue() {
  document.getElementById('slider2').innerHTML = clbk.value;
}

我还在这里上传了一个plugin示例。

我做错了什么？

Answer 1

有两件事，首先检查代码中的ID，没有slider1 id

其次，你覆盖了函数displayValue。您不能拥有两个具有相同名称的功能

检查工作示例：

https://jsfiddle.net/h3fyupjm/9/

Answer 2

这是正确的答案：你的问题是你调用相同的函数，相同的变量，这是一个很大的错误，因为是不同的，检查这个纠正错误;）

HTML

<div class="slider-wrapper">
 <input type="text" class="value1" />
 <label class="display-box-label"> Value1:</label>
 <div id="slider1" class="display-box"></div>
</div>

<div class="slider-wrapper">
 <input type="text" class="value2" />
 <label class="display-box-label"> Value2:</label>
 <div id="slider2" class="display-box"></div>
</div>

的javascript：

// Range 1
var clbk1 = document.querySelector('.value1');
var initClbk1 = new Powerange(clbk1, { callback: displayValue1, start: 20 });
function displayValue1() {
  document.getElementById('slider1').innerHTML = clbk1.value;
}

// Range 2
var clbk2 = document.querySelector('.value2');
var initClbk2 = new Powerange(clbk2, { callback: displayValue2, start: 40 });
function displayValue2() {
  document.getElementById('slider2').innerHTML = clbk2.value;
}

https://jsfiddle.net/h3fyupjm/10/

Javascript多次回调

2 个答案: