Question

似乎无法让jQuery改变我的CSS。

在我的css文件中，这有效......

.closed {
    background-image: url(http://70.55.103.238/Images/menu-collapsed.gif);
}

我需要能够使用jQuery动态更改它，所以我在$（document）.ready（function（）...

中调用它

$('.closed').css({ 'background-image' : 'url(http://'+window.location.host+'/Images/menu-collapsed.gif)' });

如果不是很明显，我需要这样做的原因是我不能使用images文件夹的相对路径，而且主机不是常量。

第一个问题，为什么jquery调用不起作用？如果我发出这样的提醒......

alert('url(http://'+window.location.host+'/Images/menu-collapsed.gif)')

我可以看到网址是正确的，如果我将警报中显示的网址直接输入地址栏，我就会得到gif。所以我相信传递的URL是正确的。我必须假设css没有改变。

第二个问题，有没有办法动态获取.css文件中的主机URL，以便我没有使用jquery？

感谢。

更新

我试过以下只是为了简单..

... CSS

.closed {
    background-image: url(../Images/menu-collapsed.gif);
}

...的JavaScript

$('.closed').css({ 'background-image' : 'url(../Images/menu-expanded.gif)' });

请注意，css设置为使用menu-collapsed.gif，javascript将其更改为men-expanded.gif。但显示的图像是menu-collapsed.gif。

Answer 1

它适用于我：

http://jsfiddle.net/gopi1410/UscLn/

检查控制台是否有任何错误＆amp;检查.closed div以检查其背景图像是否已更改。

Answer 2

好的，我想通了。我不确定这是否是设计的，但我发现每次更改由jQuery css控制的类时我都必须重置css。在我的特殊情况下，我在设置任何具有.closed类的DOM元素之前设置了图像。

我实际拥有的是一个由ul li元素组成的树状菜单，它是在$（document）.ready（function（）中创建的，树的所有节点都分配了.closed类。我移动了$（ '.closed'）。css（）调用，以便在我将树添加到DOM之后立即执行。它可以工作。

对于我在用户点击关闭的ul时使用的.open类也是如此。在将类从.closed更改为.open之后，我不得不放入$（'。open'）。css调用。并在改变后再次关闭。

所以，如果我理解我所看到的$（'。closed'）。css不能是对css的持久更改，就像手动将其输入脚本一样。我是否正在解释这种相关性？

如果有人对此感兴趣，那么我的jquery现在看起来就像他们正在使用的.css（）调用......

$(document).ready(function() {
    $.get('treeMenu.xml', function(d) {

        function makeMenu($xml) {
            var markup = "";
            function processXml() {
                //CODE TO PARSE XML INTO MENU TREE IN MARKUP VAR
            }
            $xml.children().each(processXml);
            return markup;
        }

        tree = makeMenu($(d));
        $('div.treeMenu').append(tree);
        //HAD TO PUT THE CSS CALL HERE FOR IT TO WORK
        $('.closed').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-collapsed.gif)"});

        $('.treeMenu ul,li').each(function() {
            if ($(this).hasClass("leaf")) {
                $(this).click(function() {
                    //CODE FOR CLICK ON LEAFS
                }); 
            }else {
                $(this).click(function() {
                    if ($(this).hasClass("closed")) {
                        $(this).removeClass("closed").addClass("open");

                        //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF
                        $('.open').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-expanded.gif)"});

                } else if ($(this).hasClass("open")) {
                        $(this).removeClass("open").addClass("closed");

                        //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF
                        $('.closed').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-collapsed.gif)"});

                } else {
                        $(this).addClass("open");

                        //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF
                        $('.open').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-expanded.gif)"});
                 }  
            });
        }       
      });       
  });
});

无法获取jQuery代码动态更改css

2 个答案: