0

ユーザーがjQueryのslideToggle（）を使用して見出しをクリックし、現在非表示になっているDIV内のアイテムを下にスクロールする標準リストがあります。

タグで私のCSSファイルは次のように宣言しています：

a.showBlind:hover {background:url('img/scroll.png') right center no-repeat;}

しかし、クリックしたら、そのホバー画像を変えたい（つまり、ブラインドを閉じるためのXアイコン）。jQueryを使用してこれを設定するにはどうすればよいですか？

DIVの状態は問題なく確認できます。現在、私のJqueryは次のようになっています（未完成）：

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
            });
            switch (state)
            {   case "none":

                    break;
                case "block":

                    break;
            }
        });

a：hoverのCSSを変更しswitch(state)たいのですが。どうすればこれを達成できますか？

4

4 に答える 4

1

私の理解が正しく、ホバー画像のみを変更する必要がある場合は、次のようにすることができます。

次のようなCSSを作成します。

a.showBlind:hover {background:url('img/scroll.png') right center no-repeat;}
a.showBlind.closeIcon:hover {background:url('img/close.png') right center no-repeat;}

そしてあなたのコードよりも

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
            });
            switch (state)
            {   case "none":
                    $(this).removeClass('closeIcon');
                    break;
                case "block":
                    $(this).addClass('closeIcon');    
                    break;
            }
        });
于 2012-09-18T08:56:15.583 に答える
0 
$(this).css('background-image', 'path/to/image.jpg');

パスは、CSSファイルではなく、HTMLドキュメントからの相対パスになることに注意してください。

編集：ここでjsFiddle：

http://jsfiddle.net/YZFMf/

（switchステートメントがslidetoggle関数の外にあり、「state」が適切にスコープされていなかったことを意味します...）

于 2012-09-18T08:45:47.360 に答える
0

CSSに、次のような別のエントリを追加します。

a.showBlind.hover:hover {background:url('img/X.png') right center no-repeat;}

そして、JavaScriptで、問題の要素にクラス「ホバー」を追加します。

于 2012-09-18T09:03:10.603 に答える
0

MassivePenguinとFAngelに感謝します、私はあなたの両方の助けを借りて今それを解決しました！

私のコードは次のようになります。

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            var myARef = $(this);
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
                switch (state)
                {   case "none":
                        myARef.removeClass('closeIcon');
                        break;
                    case "block":
                        myARef.addClass('closeIcon');    
                        break;
                }
            });

        });

FAngelが提案したCSSを使用して：

a.showBlind             {width: 100%; display: block;}
a.showBlind:hover       {background: url('/img/scroll.png') right center no-repeat;}
a.showBlind.closeIcon:hover {background: url('/img/close.png') right center no-repeat;}

ありがとうございました！

于 2012-09-18T09:07:08.027 に答える