如果无法从文档中找到元素，Javascript 文件将无法运行

Question

最近，我一直在研究一个错误很长一段时间。一段时间后，我设法定位并解决了问题，但我不明白为什么会出现错误。我做错了吗？

例如我的目录结构:
build
-- index.html
-- 关于.html
-- contact.html
-- 应用程序.js

所以所有三个 HTML 文档都调用了同一个外部 app.js 文件。

使用 jQuery，我有这个

$(document).ready(function(){ 

$('#img1').... // some other functions here. #img1 is only found in index.html


$('#foo').hide(); // hiding the div. #foo is in all the HTML files in the directory.

}

问题来了 -> #foo 隐藏在 index.html 中，但没有隐藏在 about.html 和 contact.html 中

当我从 app.js 中删除 $('#img1') 及其函数时，#foo 将隐藏在所有三个 HTML 文件中。似乎因为 about.html 和 contact.html 找不到名为 #img1 的 id，所以脚本的其余部分是多余的。

我设法通过让 $('#foo').hide(); 在 $('#img1')... .

但是，我很好奇为什么会这样？ jquery 不应该不关心是否找不到#img1 并继续执行下一个函数等吗？在这种情况下，这是否意味着我不能在一个 app.js 中缩小我的脚本？我错过了什么吗？ *PS 我不是 JavaScript 专家。

更新(8 月 31 日)-> 对不起大家，我想我发现了这个问题。跟Greensock Animation Platform有关(只有Timeline)

var slide1 = document.getElementById('slide-1'),
slide2 = document.getElementById('slide-2'),
slide3 = document.getElementById('slide-3'),
slide4 = document.getElementById('slide-4'),
slide5 = document.getElementById('slide-5');

var slideArray = [slide1, slide2, slide3, slide4, slide5];

var tl = new TimelineLite({}),
    delayTiming = 2.5,
    fadeTiming = 2;

tl
.to(slideArray, 0, {opacity:0})
.to(slide2, fadeTiming, {opacity:1, delay:delayTiming})
.to(slide3, fadeTiming, {opacity:1, delay:delayTiming})
.to(slide4, fadeTiming, {opacity:1, delay:delayTiming})
.to(slide5, fadeTiming, {opacity:1, delay:delayTiming, onComplete:fadeOutLastSlide});

不知何故 tl 找不到 slideArray(或其子元素)，当它找不到任何元素并导致它下面的脚本无法运行时？

我应该删除这篇文章吗？

Answer 1

你可以使用

if($('#img1').length){
    // code goes here
}

因此，仅当当前页面上有匹配元素时才会发生该操作。此外，如果脚本中出现任何错误，整个脚本将停止工作。