命名空間全局變量問題

我很新的命名空間和全局變量。我目前有這樣的代碼：命名空間全局變量問題

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

命名空間全局變量問題

回答

相關問題