5

我是 javascript 和 jQuery 的新手，所以这个问题可能看起来很愚蠢，但我找不到任何例子或文档。

我得到了这个功能，用于进行一点彩色动画翻转和展开，效果很好：

$(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
);

事实上，如果我最近添加了一个样式表更改按钮，它也可以正常工作：

$(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

关键是我想在我的翻转菜单上创建一个条件，以便我也可以切换它的颜色。

所以我尝试了这样的几件事：

/////////////////////////////////////////////////////////////////////////////
    //Stylesheet change
    $(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "black";
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "grey";
        return false;
    });

    /////////////////////////////////////////////////////////////////////////////
    //Over menu
    if (tt == "black"){
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
        );
    }else {
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#e2e2e2"}, 300 ); }
        );
    }

但当然不去了。唯一起作用的是，如果我更改 if () 中的“黑色”或其他任何东西，它在第二种翻转样式中表现良好。

任何想法 ？

4

6 回答 6

4

有几件事要评论，但不一定是您问题的答案。

样式表在页面加载时加载并应用，更改它不会追溯更改样式。所以以下将不起作用

$("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");

（即使是这样，它也会改变你所有的<link>标签！）

使用 display 可以自由显示和隐藏：

$(".wp-polls-loading").css({ display:"none"});

当您可以只使用 hide() 方法时。

$(".wp-polls-loading").hide();

您对tt变量的范围界定可能对您没有帮助。在本地减少它，即在您的匿名函数之外

还要记住，您的类选择器相对较慢。如果您可以将它们合并为元素选择器，例如

$("div.box_nav")

或者甚至为它们添加一个 id 属性，用于：

$("#MyNav")
于 2010-01-13T14:20:08.307 回答
2

您在本地声明变量“tt”，然后尝试通过外观全局访问它。无法确定，因为我们看不到您代码的整个结构，但如果您更改：

var tt = ....

至

window.tt = ....

它可能会起作用。如果您可以在方法或闭包中限定它，我不建议将其设为全局变量，但执行上述操作至少可以证明这是否是问题所在。

于 2010-01-13T14:17:06.253 回答
1

其他人所说的关于在页面加载后更改 CSS 文件是正确的。更好的解决方案是将所有 CSS 放入具有不同类名的同一个文件中，并动态添加/删除类名到您的元素，而不是尝试更改类本身（这不起作用）

编辑 - 添加示例。就像是：

<html>
  <head>
    <link href='<?php bloginfo("template_url"); ?>/css/styles-black-white.css' type="text/css" rel="stylesheet">
    <link href='<?php bloginfo("template_url"); ?>/css/styles-grey-white.css' type="text/css" rel="stylesheet">        
  </head>
  <body class=gw>
  </body>
</html>

在javascript中：

$("body").removeClass("gw").addClass("bw");

在你的 CSS 中

/* for example you had a class for anchors */
body.gw a { ... } /* was: a { ... } in styles-grey-white.css   */
body.bw a { ... } /* was: a { ... } in styles-black-white.css  */
/* for example you had a class called "hilite" */
body.gw .hilite { ... } /* was: .hilite { ... } in styles-grey-white.css   */
body.bw .hilite { ... } /* was: .hilite { ... } in styles-black-white.css  */
于 2010-01-13T14:26:28.293 回答
1

这里的问题是变量tt只存在于点击函数的范围内。您可以做的是在之前声明 tt，然后将其设置在点击操作中。

var tt = 'black'; // Default to black

$(".black-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
    $(".wp-polls-loading").css({ display:"none"});
    tt = "black";
    return false;
});

$(".grey-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
    $(".wp-polls-loading").css({ display:"none"});
    tt = "grey";
    return false;
});

此时，tt将是“黑色”或“灰色”，并且将存在于您使用if语句检查它的范围内。

此外，$是 的别名jQuery，因此无需在两者之间切换。您可以$在尝试停止动画时使用，以便一切都保持一致。

更新：我认为问题（我看不到您的所有代码，所以我无法确定）是您在文档加载时声明悬停事件。在这种情况下，它将始终使用黑色悬停。您需要做的是将悬停代码放在样式表更改函数中，以便在更改样式表时更新悬停。这是一个例子：

$(".black-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-    white.css");
    $(".wp-polls-loading").css({ display:"none"});

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

    $(".box_nav").hover(function(){
        $(this).stop(true, false).animate({ backgroundColor: "#fff"}, 300 ); },
    function() {
        $(this).stop(true, false).animate({ backgroundColor: "#000"}, 300 ); }
    );

    return false;
});

$(".grey-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
    $(".wp-polls-loading").css({ display:"none"});

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

    $(".box_nav").hover(function(){
        $(this).stop(true, false).animate({ backgroundColor: "#000"}, 300 ); },
    function() {
        $(this).stop(true, false).animate({ backgroundColor: "#e2e2e2"}, 300 ); }
    );

    return false;
});
于 2010-01-13T14:18:13.617 回答
0

好吧，一方面，您在tt其功能范围之外使用 var。如果您在该单击函数中声明它，则在该块之外看不到它。您应该首先在全局范围内声明它。

于 2010-01-13T14:19:25.703 回答
0

更改 CSS 文件不会导致页面重新呈现。您将需要进行刷新以显示新样式。

除非您使用颜色插件来处理颜色，否则您不能使用 Animate 来操作 css 颜色值。这样做的原因是 JQuery 的 Animate 函数的默认实现只增加十进制值的 css 属性。以十六进制或字符串值表示的颜色将无法正确设置动画。

于 2010-01-13T14:23:02.407 回答