命名空间全局变量问题

我很新的命名空间和全局变量。我目前有这样的代码：命名空间全局变量问题

$('#formats1').hover(function() { 
    var tag = 'div.cds'; 
    var offset = $(this).position(); 
    var width = $(tag).outerWidth(); 
    var height = $(tag).outerHeight(); 
    $(tag).show(); 
    $(tag).css('left', offset.left - width + 'px'); 
    $(tag).css('top', offset.top - height + 'px'); 
}, function() { 
    $("div.cds").hide(); 
}); 

$('#formats2').hover(function() { 
    var tag = 'div.lp'; 
    var offset = $(this).position(); 
    var width = $(tag).outerWidth(); 
    var height = $(tag).outerHeight(); 
    $(tag).show(); 
    $(tag).css('left', offset.left - width + 'px'); 
    $(tag).css('top', offset.top - height + 'px'); 
}, function() { 
    $("div.lp").hide(); 
});

这是重复多次为此刻的各种申报单。

我觉得这将是合并命名空间&全局变量的好机会，但我不确定如何做到这一点。有任何想法吗？

谢谢！

来源

2011-05-23 Yahreen

你为什么不尝试使用函数？

$('#formats1').hover(function() { 
    do_hover('div.cds', this); 
}, function() { 
    $("div.cds").hide(); 
}); 

$('#formats1').hover(function() { 
    do_hover('div.lp', this); 
}, function() { 
    $("div.lp").hide(); 
}); 

function do_hover(tag, self){ 
    var offset = $(self).position(); 
    var width = $(tag).outerWidth(); 
    var height = $(tag).outerHeight(); 
    $(tag).show(); 
    $(tag).css('left', offset.left - width + 'px'); 
    $(tag).css('top', offset.top - height + 'px'); 
}

来源

2011-05-23 21:00:30 Neal

完美！谢谢！谢谢@jAndy！ – Yahreen 2011-05-23 21:05:26

@Yahreen没有problemo^_ ^ – Neal 2011-05-23 21:06:04

好，它总是以创建命名空间和不惜一切代价避免全局变量非常好主意。但是，在这种特定情况下，你只需要一点点的Javascript & jQuery的糖：

var data = [{id: '#formats1', tag: 'div.cds'}, {id: '#formats2', tag: 'div.lp'} /*, ... */]; 

$.each(data, function(_, info) { 
    $(info.id).hover(function() { 
     var $tag = $(info.tag), 
      mypos = $.extend({ 
       width: $tag.outerWidth(), 
       height: $tag.outerHeight() 
      }, $(this).position()); 

     $tag.show().css({ 
      left: mypos.left - mypos.width + 'px', 
      top: mypos.top - mypos.height + 'px' 
     }); 
    }, function() { 
     $("div.cds").hide(); 
    }); 
});

唯一合理的变量，它应该在这里得到闭包，是$('div.cds')。例如，你可以把这整个代码包装成一个自我调用的方法：

(function _namespace() { 
    var $tag = $('#div.cds'); 

    $('#formats1, #formats2').hover(function() { 
    }); 
    // ... 
}());

来源

2011-05-23 20:57:36 jAndy

他们没有使用相同的标记 – Neal 2011-05-23 20:58:40

感谢。目前的挑战是，然而，var标记是每个$（ID）.hover – Yahreen 2011-05-23 20:59:58

@Neal，@Yahreen不同：真的，并没有意识到这一点。稍微更新一下。 – jAndy 2011-05-23 21:04:25

您可以将该类附加到用于悬停的项目。所以，如果你的HTML看起来像这样：

<div id="formats1" data-tagclass="cds">...</div> 
<div id="formats2" data-tagclass="lps">...</div>

然后，你可以使这个在JavaScript：

$('#formats1, formats2').hover(function() { 
    var $this = $(this); 
    var $tag = $('div.' + $this.data('tagclass')); 
    var offset = $this.position(); 
    var width = $tag.outerWidth(); 
    var height = $tag.outerHeight(); 
    $tag.show(); 
    $tag.css('left', offset.left - width + 'px'); 
    $tag.css('top', offset.top - height + 'px'); 
}, function() { 
    $('div.' + $this.data('tagclass')).hide(); 
});

如果你使用的是老式的jQuery，那么你可能需要使用$this.attr('data-tagclass')代替$this.data('tagclass') 。

来源

2011-05-23 21:07:13

命名空间全局变量问题

回答

相关问题