0

似乎无法让 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)' });

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

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

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

我可以看到 URL 是正确的，如果我将警报中显示的 url 直接输入到地址栏中，我会得到 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。

4

2 回答 2

1

这对我来说可以：

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

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

于 2012-06-15T03:07:10.843 回答
0

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

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

当用户单击关闭的 ul 时，我使用的 .open 类也是如此。在我将类从 .close 更改为 .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)"});
                 }  
            });
        }       
      });       
  });
});
于 2012-06-15T07:34:41.427 回答