Javascript 多个回调
Javascript multiple callbacks
本文关键字:回调 Javascript 更新时间:2023-09-26
我正在使用此插件在我的网站上显示 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;
}
我还在这里上传了一个 jsfiddle 示例。
我做错了什么?
这是正确的答案:你的问题是你调用了相同的函数,相同的变量,这是一个很大的错误,因为是不同的,请检查这个摆弄更正;)
.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/
两
件事,首先在代码中检查您的 id,没有slider1
id
其次,覆盖函数displayValue
。不能有两个同名的函数
检查工作示例:
https://jsfiddle.net/h3fyupjm/9/
相关文章:
- 如何将一个JavaScript函数回调为多个函数
- JavaScript回调函数
- 用于回调的javascript参数
- Soundcloud Javascript SDK 3.0-回调无法读取属性'connectCallback
- Javascript点击事件回调不起作用
- 如何让程序员在javascript中实现正确的回调
- 从多个回调 javaScript 返回最终对象
- 如何使用传递参数回调 JavaScript 对象属性
- 可能从其他域弹出时回调 JavaScript
- 一个函数,它接受回调并创建只能调用一次的新版本的回调.Javascript
- 构造Javascript回调:Javascript/JQuery
- 对象成员函数的回调?(Javascript)
- 回调javascript动画
- 如何将自定义回调javascript参数添加到bing API回调中
- Facebook喜欢按钮回调javascript警告框
- 在Yii2中表单验证后的回调Javascript函数
- ASP.Net ThreadPool委托回调——JavaScript不会在回调线程上触发
- 其他函数中的回调 javascript 函数
- robot -递归回调- JavaScript
- 更好的回调Javascript代码在Express/NodeJs