Question

我对名称空间和全局变量都很新。我现在有这个代码：

$('#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();
});

目前，对于各种div，这种情况重复了很多次。

我觉得这是一个很好的机会来整合名称空间和全局变量，但我不确定如何做到这一点。有什么想法吗？

谢谢！

Answer 1

为什么不尝试使用某个功能？

$('#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');
}

Answer 2

嗯，不惜一切代价创建名称空间和避免全局变量总是一个非常好主意。但在这个特殊情况下，你只需要一点点Javascript＆amp; 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() {
    });
    // ...
}());

Answer 3

您可以附加要用于悬停项目的类。所以，如果您的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')。

命名空间全局变量问题

3 个答案: