如何使所有滑块正确移动
How can I make all my sliders move properly?
我试图编写一个javascript类,该类将生成基于百分比的值滑块(不确定如何引用它)。我可以创建单个实例,但当我创建多个实例时,当您单击任何一个控制柄时,只有最后一个会移动。关于如何解决这个问题有什么想法吗?这是代码:
var sliders = [];
function slider(args,someFunction){
$this = this;
if(typeof(args) == "undefined"){
args = {};
}
this.fullContainer = document.createElement("div");
this.container = document.createElement("div");
this.handle = document.createElement("div");
this.io = document.createElement("input");
this.locationType = typeof(args.location);
this.location;
this.percentValue = 0;
if(this.locationType != "undefined" && this.locationType != "null"){
if(this.locationType == "string" && args.location[0] == "#"){
this.location = document.getElementById(args.location);
}else{
this.location = args.location;
}
}else{
this.location = (typeof(document.body) != "undefined" && typeof(document.body) != "null") ? document.body : document.getElementsByTagName("body")[0];
}
this.io.style.width = (typeof(args.tickerWidth) != "undefined") ? args.tickerWidth : "50px";
this.io.style.height = (typeof(args.tickerHeight) != "undefined") ? args.tickerHeight : "30px";
this.io.style.fontFamily = (typeof(args.tickerFont) != "undefined") ? args.tickerFont : "Arial";
this.io.style.fontSize = (typeof(args.tickerFontSize) != "undefined") ? args.tickerFontSize : "20px";
this.io.style.color = (typeof(args.tickerColor) != "undefined") ? args.tickerColor : "red";
this.io.style.cssFloat = (typeof(args.tickerFloat) != "undefined") ? args.tickerFloat : "right";
this.container.style.width = (typeof(args.containerWidth) != "undefined") ? args.containerWidth : "600px";
this.container.style.height = (typeof(args.containerHeight) != "undefined") ? args.containerHeight : "50px";
this.container.style.backgroundColor = (typeof(args.containerBG) != "undefined") ? args.containerBG : "black";
this.handle.style.width = (typeof(args.handleWidth) != "undefined") ? args.handleWidth : "30%";
this.handle.style.height = (typeof(args.handleHeight) != "undefined") ? args.handleHeight : "50px";
this.handle.style.backgroundColor = (typeof(args.handleBG) != "undefined") ? args.handleBG : "red";
this.location.appendChild(this.fullContainer);
this.fullContainer.appendChild(this.container);
this.container.appendChild(this.handle);
this.fullContainer.className += " slider";
this.io.className += " sliderTicker";
this.fullContainer.appendChild(this.io);
this.io.value = "0";
this.changeValue = function(amt){
$this.io.value = amt/(($this.container.offsetWidth - $this.handle.offsetWidth)) * 100;
$this.percentValue = amt;
$this.handle.style.marginLeft = amt + "px";
}
this.changeValuePercent = function(amt){
$this.percentValue = amt;
$this.handle.style.marginLeft = amt/100*($this.container.offsetWidth - $this.handle.offsetWidth) + "px";
}
this.calculateValue = function(pageX){
return ((pageX - $this.container.offsetLeft) - $this.handle.offsetWidth/2);
}
this.container.addEventListener("mousedown",function(e){
$this.handle.style.cursor = "pointer";
document.body.style.cursor = "pointer";
$this.container.style.cursor = "pointer";
window.onmousemove = function(e){
if(e.pageX >= $this.handle.offsetWidth/2 && e.pageX <= $this.container.offsetWidth - $this.handle.offsetWidth/2){
$this.changeValue($this.calculateValue(e.pageX));
}
}
window.onmouseup = function(){
window.onmousemove = null;
}
});
this.io.onfocus = function(){
window.onkeyup = function(e){
if(e.keyCode == 13){
$this.changeValuePercent($this.io.value);
}
}
$this.io.onblur = function(){
}
}
window.onresize = function(){
$this.handle.style.marginLeft = $this.io.value/100*($this.container.offsetWidth - $this.handle.offsetWidth) + "px";
}
if(typeof(someFunction) == "function"){
someFunction();
}
}
slider.prototype.generate = function(num,args){
for(var i = 0; i<num; i++){
sliders.push(new slider(args));
}
}
slider.prototype.generate(5,{
containerWidth:"100%",
containerBG:"#62CA72",
handleBG: "#28AE40",
tickerColor: "#BB1A42",
tickerFont: "Helvetica",
tickerWidth: "60px",
tickerHeight:"35px",
tickerFontSize: "30px"
});
将$this = this;
更改为var $this = this;
function working(arg) {
var $this = this;
this.foo = arg
this.test = function () {
console.log($this.foo)
}
}
var s1 = new working('bar') // bar
s1.test()
var s2 = new working('baz').test() // baz
s1.test() // bar
function broken(arg) {
$that = this;
this.foo = arg
this.test = function () {
console.log($that.foo)
}
}
var s1 = new broken('bar')
s1.test() // bar
var s2 = new broken('baz').test() // baz
s1.test() // baz
Fiddle
相关文章:
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- Snake javascript,上下移动,使块大于5px
- 如何使用 JavaScript 在 Firefox 中使所需的无线电输入可选
- 如何使“所选选项”与当前“所选选项”文本的宽度相同
- 在使用 WinMove 移动时使可拖动面板“粘滞”
- 如何使所选导航按钮保持活动状态
- 在多个选择中,使所选选项统一
- Jquery滑块向下移动如何使它水平移动
- 如何使所有的html元素顶部的图像
- 如何使所选菜单默认禁用
- 我如何使所有的JavaScript按钮相同的大小
- 使所点击的链接被访问,而不实际向服务器发送请求
- 如何使所选子字符串作为链接和粗体
- 如何使所需的验证器或其他验证器被触发错误在Page_load,即使没有错误
- 如何在鼠标移动时使图像变色
- 使所选文本成为变量&插入
- 如何在javascript中使所选文本加粗/斜体/下划线
- 使所选下拉菜单只读(未禁用)
- 灯箱2功能齐全,要使所查看的图像全尺寸