如何使用 JavaScript 代码在 if 条件下使用函数方法？

Question

我想在我的 JavaScript 代码中给出条件方法。此代码在 Internet Explorer 10 版本中不起作用。当我将此代码粘贴到JavaScript validator 时，会显示此消息：

函数声明不应放在块中。使用函数表达式或将语句移到外部函数的顶部。

我怎样才能在这里有一个函数？

            if(jQuery("header").attr("id") == "header-style-two")
        {
                    function sticky_relocate() {
                        var window_top = jQuery(window).scrollTop();
                        var div_top = jQuery('#sticky-anchor').offset().top;
                        if (window_top > div_top) {
                            jQuery('.mainmenu-area').removeClass('light-menu');
                            //This is for when div in top         
                        } else {
                            jQuery('.mainmenu-area').addClass('light-menu');
                            //This is for when div in not top
                        }
                    }

                    jQuery(function () {
                        jQuery(window).scroll(sticky_relocate);
                        sticky_relocate();
                    }); 
        }   

Answer 1

You can't have named function in an if block（它在规范中是无效的，无论如何提升都会使它相当混乱，但是一些 JavaScript 引擎可能会尝试补偿错误代码，这就是它可能在某些浏览器中工作的原因），但你可以分配函数到 if 块中的变量。

而不是：

function sticky_relocate() {

你可以这样做：

var sticky_relocate = function() {

所以这样的事情就可以解决问题：

if(jQuery("header").attr("id") == "header-style-two")
{
    var sticky_relocate = function() {
        var window_top = jQuery(window).scrollTop();
        var div_top = jQuery('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            jQuery('.mainmenu-area').removeClass('light-menu');
            //This is for when div in top         
        } else {
            jQuery('.mainmenu-area').addClass('light-menu');
            //This is for when div in not top
        }
    }

    jQuery(function () {
        jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
    }); 
}

Answer 2

在 if 条件下不能有函数声明。你可以把它放在外面，根据条件调用它。

var isHeaderStyleTwo = (jQuery("header").attr("id") == "header-style-two");
function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    jQuery('.mainmenu-area').removeClass('light-menu');
    //This is for when div in top         
  } else {
    jQuery('.mainmenu-area').addClass('light-menu');
    //This is for when div in not top
  }
}

jQuery(function () {
  if (isHeaderStyleTwo) {
      jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
  }

Answer 3

JSHint 给你一个警告，意思是，“我们认为这不是最好的主意，但我们会允许你这样做。”

您可以通过多种方式更改代码。

将函数声明改为函数表达式：

if(jQuery("header").attr("id") == "header-style-two") {
  var sticky_relocate = function() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('#sticky-anchor').offset().top;
    if (window_top > div_top) {
      jQuery('.mainmenu-area').removeClass('light-menu');
      //This is for when div in top         
    } else {
      jQuery('.mainmenu-area').addClass('light-menu');
      //This is for when div in not top
    }
  }
  jQuery(function () {
    jQuery(window).scroll(sticky_relocate);
    sticky_relocate();
  }); 
}

或将函数定义移出if 块。

if(jQuery("header").attr("id") == "header-style-two") {
  jQuery(function () {
    jQuery(window).scroll(sticky_relocate);
    sticky_relocate();
  }); 
}

function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    jQuery('.mainmenu-area').removeClass('light-menu');
    //This is for when div in top         
  } else {
    jQuery('.mainmenu-area').addClass('light-menu');
    //This is for when div in not top
  }
}