Question

我编写了一个可以在Chrome中运行奇迹的脚本，但它在Opera和Firefox中不起作用。我是js的新手。提示可能出现什么问题？

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-50px");
    }, function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-38px");
    });

    $("#question_tab").click(function() {
        if ($("#question").css("left") == "100%") {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
        } else {
            $("#question").animate({
                marginLeft: "-38px",
                left: "100%"
            });
        }
    });
});

我认为问题在于检查 - 如果（$（“＃question”）。css（“left”）==“100％”）

HTML，JS和CSS：http://jsfiddle.net/HjS9z/4/

滑动问题表单的问题。

Answer 1

如果在此处找到解决我的问题：jquery if else condition for css api

我为隐藏表单添加“隐藏”类。工作代码：

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-47px");
    }, function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-36px");
    });

    $("#question_tab").click(function() {
        if ($("#question").hasClass("hidden")) {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
            $("#question").removeClass("hidden");
        } else {
            $("#question").animate({
                marginLeft: "-36px",
                left: "100%"
            });
            $("#question").addClass("hidden");
        }
    });
});

Answer 2

调试将是你最好的朋友（最简单的方法，因为你是JS的新手可能是使用alert（）或者设置断点或使用console.log（）

会更好

**对于其他读者我知道alert（）不是首选，我只是为那些不熟悉JS和调试的人提供选项

你会看到例如：$("#question").css("left")值等于'100％'在chrome中，但在firefox中，例如该值以像素（例如837px）定义。因此，您的代码在其他浏览器中失败的原因是因为您的“IF”语句永远不会解析为true（匹配）。

jQuery脚本在Chrome中工作，不适用于FireFox和Opera

2 个答案: