Question

最近，我一直在研究一个bug很长一段时间。过了一段时间，我设法找到问题并解决它，但我不明白为什么有一个bug。我做错了吗？

例如我的目录结构：
建造中 - index.html
- about.html
- contact.html
- app.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.

}

现在出现问题 - ＆gt; #foo隐藏在index.html中，但未隐藏在about.html和contact.html

中

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

我设法在$('#foo').hide();之前让$('#img1')进行了工作....

但是，我很好奇为什么会这样呢？不应该关心如果找不到#img1并转移到下一个功能等等吗？在这种情况下，这是否意味着我不能在一个app.js中缩小我的脚本？我错过了什么。 * PS我不是一个javascript专业人士。

更新（31Aug） - ＆gt;对不起伙计们，我想我发现了这个问题。这与Greensock动画平台（仅时间轴）有关

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
}

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

如果Javascript文件无法从文档中找到元素，则它不起作用

1 个答案: