JavaScript 在与其他 JavaScript 代码位于同一文件中时将不起作用，并且仅当包含 'defer' 时才起作用。为什么？

Question

我有一段 JQuery 代码可以使内联 link 平滑地滚动到 <section> 并在同一页面上分配 ID（下图）。

/*Smooth Scrolling effect*/
$('a[href*="#"]:not([href="#"])').click(function() {
 if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  if (target.length) {
   $('html, body').animate({
    scrollTop: target.offset().top
   }, 1000);
   return false;
  }
 }
});

出于某种原因，这只有在我的 JavaScript 代码

的其余部分外部放置时才有效

//*Side Navigation Menu*//
/* Open Side Nav - Set the width of the side navigation to 250px when burger menu icon is clicked. This perhaps needs rehashing a whole bunch more to make it more my own*/
function openNav() {
 document.getElementById("mySidenav").style.width = "300px";
}

/*Close Side Nav - Set the width of the side navigation to 0 when close button is clicked*/
function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
}




//*Email Popup Form - Currently resets user's view to the top of the screen. This needs to be fixed.*//
$ = function(id) {
 return document.getElementById("popup");
}
var show = function(id) {
 $(id).style.display = 'block';
}
var hide = function(id) {
  $(id).style.display = 'none';
 }



 //*On hover over images on homescreen, display a black opacity box - Needs transferring to a seperate 'homepage' specific JavaScript file*//
$(function() {
 $('#img0').hover(function() {
  $('#fadeBox0').fadeIn(500);
 }, function() {
  $('#fadeBox0').fadeOut();
 });
});

$(function() {
 $('#img1').hover(function() {
  $('#fadeBox1').fadeIn(500);
 }, function() {
  $('#fadeBox1').fadeOut();
 });
});

$(function() {
 $('#img2').hover(function() {
  $('#fadeBox2').fadeIn(500);
 }, function() {
  $('#fadeBox2').fadeOut();
 });
});

$(function() {
 $('#img3').hover(function() {
  $('#fadeBox3').fadeIn(500);
 }, function() {
  $('#fadeBox3').fadeOut();
 });
});

我认为评论充分（据我所知，我是初学者）解释了 JavaScript 应该做什么，但由于某种原因，其中一些也已停止工作。我不知道我可以改变什么，或者在哪里，因为网站的其余部分完全依赖于 HTML 和 CSS。（注意：在刚刚测试了一些东西之后，似乎上面所有 JavaScript 都停止工作了，除了标有 'Side Navigation Menu' 的小部分）。任何关于为什么会发生这种情况的帮助将不胜感激。

提前致谢！

编辑：我忘了提，平滑滚动效果在外部 JavaScript 文件中有效，但仅当在脚本标记中使用 Defer 时。我还没有在 JavaScript 的其他部分尝试过此操作，但我不希望我的代码针对每个单独的函数分成单独的 JavaScript 文件。

Answer 1

好的，不止 "what is broken" 让我们尝试围绕代码展开思考。

这是说：（处理过程中发生了什么）

获取 href 属性不等于“#”的所有元素（真的是所有元素吗？）
THEN 在该集合中获取所有 a 具有 href 属性且其中包含“#”的元素

$('a[href*="#"]:not([href="#"])').click(function() {

这是说：（处理过程中发生了什么）

获取所有 "a" 个具有 href 且其中包含 # 的元素
然后排除 href 属性不等于“#”的那些

$('a[href*="#"]').not('[href="#"]').on('click', function(){

因此第二种形式更有效：

$('a[href*="#"]').not('[href="#"]').on('click', function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});

那 $('html, body') - $('body') 会在那里工作吗？为什么动画 those/both?

$(someselector).click(function(){ 是 $(someselector).on('click',function()( 的快捷方式，因此只需使用第二种形式即可。

//Email Popup Form - Currently resets user's view to the top of the screen. This needs to be fixed.//

单独来看这什么都不做（DID 在

之前覆盖了 jQuery 别名 $

// do NOT replace the alias:
var popme = function(id) {
  return document.getElementById("popup");
};

这些都坏了：

var show = function(id) {
  $(id).style.display = 'block';
};
var hide = function(id) {
  $(id).style.display = 'none';
};

固定版本：

var show = function(id) {
  $(id)[0].style.display = 'block';
};
var hide = function(id) {
  $(id)[0].style.display = 'none';
};

show("#myid");
hide("#myid");

为什么要这样做而不只是使用 jQuery 因为你已经有了它？

$("#myid").show();
$("#myid").hide();

//*悬停在主屏幕上的图像上时，显示黑色不透明框 - 需要传输

一个文档就绪事件处理程序：

$(function() {
  $('#img0').hover(function() {
    $('#fadeBox0').fadeIn(500);
  }, function() {
    $('#fadeBox0').fadeOut();
  });

  $('#img1').hover(function() {
    $('#fadeBox1').fadeIn(500);
  }, function() {
    $('#fadeBox1').fadeOut();
  });

  $('#img2').hover(function() {
    $('#fadeBox2').fadeIn(500);
  }, function() {
    $('#fadeBox2').fadeOut();
  });

  $('#img3').hover(function() {
    $('#fadeBox3').fadeIn(500);
  }, function() {
    $('#fadeBox3').fadeOut();
  });
});

与 classes 交替（假设 fadeBox class 在子元素上）...

 $('#img0,#img1,#img2').hover(function() {
    $(this).find('.fadeBox').fadeIn(500);
  }, function() {
    $('.fadeBox').fadeOut();
  });

备选方案 2，对指向的任何内容使用 classes：

 $('.myImages').hover(function() {
    $(this).find('.fadeBox').fadeIn(500);
  }, function() {
    $('.fadeBox').fadeOut();
  });

注意 hover 是 mouseenter 和 mouseout 事件处理程序的缩写。参考：https://api.jquery.com/hover/

JavaScript 在与其他 JavaScript 代码位于同一文件中时将不起作用，并且仅当包含 'defer' 时才起作用。为什么？

JavaScript won't work when in the same file as other JavaScript code, and only when 'defer' is included. Why?

html

javascript

css

jquery

external