优化 jquery、html 和 css 代码以进行弹出答案

【问题标题】：optimize jquery,html and css code for pop up优化 jquery、html 和 css 代码以进行弹出
【发布时间】：2012-10-15 01:40:42
【问题描述】：

我已经为弹出窗口编写了一个 jquery 代码，但问题是我想优化 jquery 代码，你能告诉我如何优化它以在浏览器中获得更好的结果..

如果你也告诉 html 和 css 那就太好了....

我在下面提供 jquery 代码....

    // locale selector actions
    $('#region-picker').click(function(){
        if ($("#locale-select").is(":visible")) return closeSelector('slide');
        var foot_height = $('#footer').innerHeight();
        var foot_height_css = foot_height-1;
        var select_position = '-=' + (Number(700)+18);
        console.log("hallo"+select_position);
        var $selector = $('#locale-select');
        $('#locale_pop').fadeOut();
        $selector.css({top:foot_height_css});
        $selector.fadeIn(function(){
            $(this).addClass('open');
            $(this).animate({top:select_position}, 1000);
            });
    });
    $('#select-tab').click(function(e){
        e.stopPropagation()
        closeSelector('slide');
        });
    // don't hide when clicked within the box
    $('#locale-select').click(function(e){
        e.stopPropagation();
    });
    $(document).click(function(){ 
        if ($('#locale-select').hasClass('open')) {
            closeSelector('disappear');
        }
    });

    $('.locale-link').click(function(){
        //var $clicked = $(this); //"$(this)" and "this" is the clicked span
        $(".locale-select-lable").html($(this).html());
        //search for "marginXXXXX"
        var flags = $(this).attr("class").match(/(margin\w+)\s/g);
        //create new class; add matching value if found
        var flagClass = "tk-museo-sans locale-select-lable" + (flags.length ? " " + flags[0] : "");
        //set new class definition
        $(".locale-select-lable").attr("class", flagClass);

        closeSelector('disappear');

        //if ($("#locale-select").is(":visible")) return closeSelector('slide');
       /*         
       // var desired_locale = $(this).attr('rel');
       // createCookie('desired-locale',desired_locale,360);
       // createCookie('buy_flow_locale',desired_locale,360);
        //closeSelector('disappear');
        */
    });  /* CORRECTED */

    $('#locale_pop a.close').click(function(){
        var show_blip_count = readCookie('show_blip_count');
        if (!show_blip_count) {
            createCookie('show_blip_count',3,360);
        }
        else if (show_blip_count < 3 ) {
            eraseCookie('show_blip_count');
            createCookie('show_blip_count',3,360);
        }
        $('#locale_pop').slideUp();
        return false;
    }); 

function closeSelector(hide_type){
var foot_height = $('#footer').innerHeight();
var select_position = '+=' + (Number(400)+20);
if (hide_type == 'slide') {
$('#locale-select').animate({top:select_position}, 1000, function(){
$(this).removeClass('open');
$(this).fadeOut()
});
}
else if (hide_type == 'disappear'){
$('#locale-select').fadeOut('fast');
$('#locale-select').removeClass('open');
}
}

【问题讨论】：

运行 Firebug JS 分析器并找到瓶颈...
尽量避免使用类并尽可能坚持使用 ID。
你在codereview.stackexchange.com上可能会有更好的运气

标签： jquery html css

【解决方案1】：

大多数标准的 jquery 优化可以很容易地在谷歌搜索 jquery 最佳实践中找到。很多资源。这是来自谷歌的一对。

jQuery Standards and Best Practice

http://24ways.org/2011/your-jquery-now-with-less-suck

特别是对于您的代码，我会考虑使用.on() 而不是.click() 作为您的.locale-link 元素，并且还可以利用方法链接和缓存一些jquery 对象。希望这会有所帮助。

【讨论】：