Вопрос о глобальной переменной пространства имен

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

Вы можете прикрепить класс для использования к обнаруженному предмету.Итак, если ваш 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').

Answer 3

Ну, это всегда очень хорошая идея для создания пространств имен и избегать глобальных переменных любой ценой. Но в данном конкретном случае вам просто нужно немного сахара 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() {
    });
    // ...
}());