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 が変更されていないと仮定する必要があります。

2 番目の質問です。jquery を使用しないように、.css ファイルでホスト URL を動的に取得する方法はありますか?

ありがとう。

アップデート：

簡単にするために、次のことを試しました。

CSS...

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

ジャバスクリプト...

$('.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 をリセットする必要があることがわかりました。私の特定のケースでは、.closed のクラスを持つ DOM 要素を持つ前に画像を設定していました。

私が実際に持っているのは、ツリーのすべてのノードに .closed クラスが割り当てられた $(document).ready(function() で作成された ul li 要素で構成されるツリー メニューです。私は $('.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)"});
                 }  
            });
        }       
      });       
  });
});
于 2012-06-15T07:34:41.427 に答える