Question

我尝试编写一个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"
    });

Answer 1

将$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

如何让所有滑块正常移动？

1 个答案: