jQuery函数无法解析答案

【问题标题】：jQuery functions not resolvingjQuery函数无法解析
【发布时间】：2012-07-25 08:42:30
【问题描述】：

我对堆栈溢出和从头开始使用 jQuery 都是新手，所以请原谅我有任何不正确的格式（或完全省略代码）以及明显劣质的编码实践。

我正在这里编制一个投资组合： Question answered, link removed

如果您尝试单击导航中的链接，则会出现淡出>淡入效果解决。在 Portal 和 About 之间，链接可以很好地工作，但是如果您单击 Journal、Resources 或 Contact，文本会中断并且在离开它们时无法淡出。

我可以替换单个 div 的 innerHTML，但我更喜欢使用这种格式来交换内容。谁能告诉我为什么它适用于前两个链接，但当我对它们进行相同编码时，其他三个链接会中断？

【问题讨论】：

SSCCE - 请直接提供适用的代码，如果需要，请提供链接。
你可能想把代码放在这里，没有科学依据 - 实际上，你必须这样做，否则这将和关闭一样好

标签： jquery javascript-framework javascript

【解决方案1】：

我不确定这是否能解决您的问题，但我注意到您的所有条件检查都使用单个等号而不是双等号（甚至更好，三等号！）。

尝试从这里更改所有条件：

else if (about=true)

到这里：

else if (about===true)

编辑：在浏览了 javascript 之后，我注意到您有很多不必要的冗余代码。我在 jsfiddle 上写了一个小演示，希望能帮助你大大减少你的代码。

http://jsfiddle.net/FdeM9/

$('a').on('click', function () {
    var clickedDiv = this;
    var visibleDiv = $('div:visible');
    var divToShow = $('div').eq(parseInt(clickedDiv.innerHTML)-1);

    if (visibleDiv[0] === divToShow[0]) {
        return;
    }

    visibleDiv.fadeOut(500, function () {
        divToShow.fadeIn(500);
    });
});

【讨论】：

实际上，它确实修复了大部分问题。但是，日记似乎无法导航到资源或联系人，资源仍然中断。 o_O
@Kwon 您的链接现在似乎运行良好（至少在 chrome 中）编辑 - 日记仍然有问题。
效果很好。一旦我理解了它，我就实现了它并且效果很好。非常感谢。 :)

【解决方案2】：

您应该在 if 语句中使用双等号 == 进行比较。

【讨论】：

谢谢！我不知道我是怎么错过的。但是，我确实进行了更改，但发现在几个链接之间导航仍然有些麻烦。
对于初学者，我认为$('#nav_05') 块中的代码应该检查journal==true 而不是resources==true。事实上，#nav_04、#nav_05 上的很多检查似乎都不正确。
啊，冗余编码的瘟疫。感谢您指出。

【解决方案3】：

您将赋值运算符 (=) 与比较运算符（== 或 === 用于类型比较）混淆了。

由于您的条件是从布尔变量中读取的，因此您可以执行以下操作：

如果（条件）{

}

您的脚本标签也缺少类型属性。

您还应该将这些事件绑定调用封装在一个函数中，并将该函数附加到 onReady(jQuery(document).ready) 事件。

在全局变量中也是邪恶的（或者至少应该避免）。查看您的代码，您似乎打算使用这些全局标志来启用或禁用某些菜单项？为什么不首先控制这些菜单项的呈现，这样您就不需要全局变量了。

【讨论】：

我修复了比较运算符（并添加了类型属性而不是懒惰），但是将脚本附加到 onReady 事件真的有必要还是只是好的编码习惯？不过，您的最后一点是正确的。你是建议使用 ajax 还是我遗漏了一些明显和简单的东西？
您可能正在使用一些 php 代码来控制顶部布尔标志的值。我的建议不是这样做，而是使用相同的服务器端 php 条件来控制是否呈现/写入各个菜单项。既然您提到了 ajax，您是否尝试在不重新加载页面的情况下启用/禁用某些菜单项？那么在这种情况下，您可以改用样式类来控制它。
准备是必要的，因为您最终可能会将这些脚本移动到单独的文件中，或者在实际菜单 div 之前移动脚本标签。您要在 onReady 事件上执行初始化的原因是您的初始化代码依赖于 DOM 的就绪性。
我正在考虑放弃对单个菜单项的需求，并编写一个更通用的函数来节省对如此多代码的需求（我可以在需要解决事件时调用它）。我从来没有花时间从头开始制作阿贾克斯的正面或反面，所以我还没有开始。我实际上会在那里接受你的建议。非常感谢你:)。

【解决方案4】：

最简单和最干净的方法是给所有菜单项一个类让我们说“菜单”

那就用这个

$(".menu").click(function () {
    $(".menu").fadeOut().delay(500);
    $(this).fadeIn();
}

【讨论】：

这在我的脑海中是有道理的，所以我会试一试，谢谢。