Namespace Global Variable Question

I'm very new to namespace and global variables. I presently have this code:

$('#f开发者_运维问答ormats1').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();
});

This is repeated many times for various divs at the moment.

I feel like this would be a good opportunity to incorporate a namespace & global variables but I'm unsure how to do it. Any ideas?

Thanks!

---

Why don't you try using a function?

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

---

Well, it's always a very good idea to create namespaces and avoid global variables at all costs. But in this particular instance, you just need a little bit Javascript & jQuery sugar:

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

The only reasonable variable which should get closured here, is $('div.cds'). For instance, you can wrap this whole code into a self-invoking method:

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

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

---

You could attach the class to use to the hovered item. So, if your HTML looks like this:

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

Then you could so this in your 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();
});

If you're using an older jQuery then you might need to use $this.attr('data-tagclass') instead of $this.data('tagclass').