如何在帶有JavaScript代碼的if條件中使用函數方法？

Question

我想在我的JavaScript代碼中給出條件方法。 此代碼在Internet Explorer 10版本中不起作用。 當我在JavaScript驗證器中粘貼此代碼時，會顯示以下消息：

函數聲明不應放在塊中。 使用函數表達式或將語句移動到外部函數的頂部。

我怎么能在這里有功能？

            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

你不能在if塊中使用命名函數 （它不符合規范並且提升會使它相當混亂，但是一些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

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
  }
}

Answer 3

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