Erwartet ':' und stattdessen sah '_variableName'

Question

Ich bin verwirrt, wo diese Variablen zu deklarieren, damit ich sie als & obj.slider._maxVal verwenden kann. Ich erhalte JShint-Fehler:

var _minVal = 75; ^ Erwartet ':' und stattdessen '_minVal'. var_minVal = 75; ^ Erwartete eine Kennung und stattdessen '='.

var obj = obj || {}; 

obj.slider = { 
var _minVal=75, //Confused where to define these variables so it's available 
    _maxVal=300;//in _createSlider(); 

init:function(){ 
    console.log('Initialization of Slider'); 
    var $this = $(this); 

    this._createSlider(); 
    return false; 
}, 

// setSliderMin:function(sliderId, minVal){ 

// }, 

_createSlider:function(){ 
    $('.slider-range').slider({ 
     range: true, 
     min: obj.slider._minVal, 
     max: obj.slider._maxVal, 
     values: [obj.slider._minVal, obj.slider._maxVal], 
     slide: function(event, ui) { 
     $('#amount').val('$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]); 
     var handle = $(this).find('.ui-slider-handle'); 
     $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
     $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
     } 
    }); 

    var value = $('#slider-range').slider('option', 'values'); 

    $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>'); 
    $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>'); 
} 
}; 

obj.slider.init(); 

}); 

Answer 1

Die Syntax für Membervariablen ist das gleiche wie für die Mitgliederfunktionen:

key1: val, 
key2: val 

ändern Objekt den Schlüssel/Wert-Syntax:

obj.slider = { 
    _minVal: 75, 
    _maxVal: 300, 
    _createSlider: function() {...}, 
    init: function() {...} 
}; 

Alternativ

Sie Vielleicht möchten Sie eine Funktion verwenden, wenn Sie versteckte Variablen und vielleicht mehr natürlichen Code möchten:

obj.slider = function() { 
    var _minVal = 75, 
     _maxVal = 300, 
     _createSlider = function() {...}; 
    (this.init = function() {...})(); 
}; 

var slider = new obj.slider(); 
// later on you can reset by calling 
slider.init(); 

JSFiddle

Answer 2

schaffen eine Eigenschaft mit : es dann mit this verwenden: -

var obj = obj || {}; 

obj.slider = { 

    _minVal: 75, 
    _maxVal: 300, 

    init: function() { 
    console.log('Initialization of Slider'); 
    var $this = $(this); 

    this._createSlider(); 
    return false; 
    }, 

    _createSlider: function() { 

    $('.slider-range').slider({ 
     range: true, 
     min: this._minVal, 
     max: this._maxVal, 
     values: [this._minVal, this._maxVal], 
     slide: function(event, ui) { 
     $('#amount').val('$' + ui.values[0] + ' - $' + ui.values[1]); 
     var handle = $(this).find('.ui-slider-handle'); 
     $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
     $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
     } 
    }); 

    var value = $('#slider-range').slider('option', 'values'); 

    $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>'); 
    $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>'); 
    } 
}; 

obj.slider.init(); 

Answer 3

@ Beng Antwort ist groß, aber Sie können auch eine Klasse anstelle der Verwendung von JSON Objektliteral erstellen um Ihre Variablen/Funktionen privat zu machen.

var obj = obj || {}; 

obj.slider = function(){ 

    var _minVal = 75; 
    var _maxVal = 300; 

    console.log('Initialization of Slider'); 
    var $this = $(this); 

    _createSlider(); 
    return false; 

    function _createSlider() { 
    $('.slider-range').slider({ 
     range: true, 
     min: _minVal, 
     max: _maxVal, 
     values: [_minVal, _maxVal], 
     slide: function(event, ui) { 
     $('#amount').val('$' + ui.values[0] + ' - $' + ui.values[1]); 
     var handle = $(this).find('.ui-slider-handle'); 
     $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>'); 
     $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>'); 
     } 
    }); 

    var value = $('#slider-range').slider('option', 'values'); 

    $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>'); 
    $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>'); 
    } 
}; 

new obj.slider();