Question

我遇到了奇怪的问题，这是我的代码

$(document).ready(function(){
    $(".switch-content div:first-child").fadeIn();
    $(".switch-content div:first-child").toggleClass("switch-active");
    $(".switch-menu ul li").click(function(){
        var clicked = $(this).index()+1;
        $(this).parent().find("li.switch-active").toggleClass("switch-active");
        $(this).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div.switch-active").fadeOut();
        $(this).parent().parent().parent().find(".switch-content div.switch-active").toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).fadeIn();
    });

})
var anchor = window.location.hash.substring(1);
var linked = $("#"+anchor).index()+1;

^这可行

当我的代码是这样的，一切正常，但当我在第一个位置移动变量时，我的javascript停止工作。

var anchor = window.location.hash.substring(1);
var linked = $("#"+anchor).index()+1;
$(document).ready(function(){
    $(".switch-content div:first-child").fadeIn();
    $(".switch-content div:first-child").toggleClass("switch-active");
    $(".switch-menu ul li").click(function(){
        var clicked = $(this).index()+1;
        $(this).parent().find("li.switch-active").toggleClass("switch-active");
        $(this).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div.switch-active").fadeOut();
        $(this).parent().parent().parent().find(".switch-content div.switch-active").toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).fadeIn();
    });

^这不起作用

有谁知道为什么？对我来说完全是无稽之谈。我知道我的代码可以更简单，我正在研究它。：）

谢谢你，祝你有愉快的一天

Answer 1

我认为以下部分代码正在破坏

var anchor = window.location.hash.substring(1);
var linked = $("#"+anchor).index()+1;

请检查控制台。子字符串可能返回了一些值，jquery无法找到DOM元素。一旦发生javascript错误，代码的剩余部分将不会被执行。控制台错误将帮助您了解根本原因

Answer 2

我认为这是因为它在$（文件）.ready（）

之外

当页面加载时，浏览器将首先加载该函数，使变量退出函数，这意味着它们的值将为null。

将其作为全球性的做法：

var Foo = {};

$(document.ready(function() {
    Foo.anchor = window.location.hash.substring(1);
    Foo.linked = $("#"+anchor).index()+1;
    // rest of code
});

Answer 3

我找到了解决问题的方法。在文档加载之前我正在寻找一些东西。所以这就是我修复它的方式。

var anchor = window.location.hash.substring(1);
var linked = "";
$(document).ready(function(){
    linked = $("#"+anchor).index()+1;
    $(".switch-content div:first-child").fadeIn();
    $(".switch-content div:first-child").toggleClass("switch-active");
    $(".switch-menu ul li").click(function(){
        var clicked = $(this).index()+1;
        $(this).parent().find("li.switch-active").toggleClass("switch-active");
        $(this).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div.switch-active").fadeOut();
        $(this).parent().parent().parent().find(".switch-content div.switch-active").toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).fadeIn();
    });
})

谢谢你们让我意识到我的错误。：）

当变量第一时，函数不起作用

3 个答案: