Question

我正在构建一个jquery滑块，我遇到了一个全局变量的麻烦。在我的情况下，我不能将它用作本地的。我在一个页面上使用多个滑块，因此这个全局变量EndPosition应该与滑块不同。

$.fn.slider = function(id) {        
    var SliderID = id;
    EndPosition = (VisibleWidth - TotalWidth); //End position for sliding

有没有办法将id传递给变量名，比如EndPosition + id，所以我可以在代码的其他部分使用它，例如这里

if (NewPosition <= EndPosition+id){
                RightNav.addClass('disabled');    
            }

Answer 1

我建议使用对象和括号表示法：

var positions = {
   'endPosition1': 'foo',
   'endPosition2': 'bar'
}

var value = positions['endPosition' + id];

如果您的变量是全局变量，您可以像其他属性一样访问它们，但这次是全局window对象的属性：

window['EndPosition' + id];

如果id是数字，你也可以使用一个简单的数组：

var positions = ['foo', 'bar'];
positions[id];   
positions[id - 1]; // ?

Answer 2

使用对象来包含结束位置比使用多个全局变量更简洁：

var EndPositions = {};

// ...

EndPositions['id_one'] = 10;
EndPositions['id_two'] = 20;

// ...

if (NewPosition <= EndPositions[id]){
    RightNav.addClass('disabled');    
}

Answer 3

更清洁的方式（IMO）：

$.fn.slider = function(...) {
    // ...
    $(this).data('end-position', visibleWidth - totalWidth);
    // ...
};

所以如果你做了

$('.slider').slider(...);

您可以像这样访问end-position变量

$('.slider').data('end-position');

修改

如果您需要按ID找到滑块的结束位置，可以这样做：

<div class="slider" data-id="1"></div> <script type="text/javascript"> $(document).ready(function() { $('.slider').slider(...); ... = $('.slider[data-id=1]').data('end-position'); }); </script>

Answer 4

是的，你可以：

window["EndPosition" + id]

所以你有：

   if (NewPosition <= window["EndPosition" + id]) ...

window是所有全局变量的容器。

干杯

Answer 5

是的，你可以使用json数组，你可以这样做：

var sliderObject = [
{ "EndPosition":VisibleWidth - TotalWidth }, 
{ "ID": id  }, 
];

然后检查::

NewPosition <= sliderObject [EndPosition][0]

看看：http://www.w3schools.com/json/json_syntax.asp

变量名中的jquery id

5 个答案: