1

みんな。この Web サイトや他の多くの Web サイトを検索して、Jquery コードで toggleClass 関数が機能しない理由を理解しました。いくつかの異なる説明を見つけましたが、エフェクトで実行したいことと一致しませんでした。

私は Jquery を初めて使用するので、Jquery の機能についてよくわかりません。これが私のJqueryコードです：

$("document").ready(function(){
   $("div#btn-slide").click(function(){
      $("div#panel").slideToggle("slow");
      $("div#btn-slide").toggleClass("smallbox");
   });
});

これが私のHTMLコードです。

<div id="panel">
</div>

<div id="btn-slide">
</div>

ここで私が探している効果は非常に単純です。小さい div (btn-slide) をクリックすると、小さい div の上にある大きい div (パネル) が、完全に非表示になるまでブラウザ画面に表示されます。これが、slideToggle("slow" ） 関数。

次に、最後にやりたいことは、小さい div (btn-slide) の背景画像を変更することです。これが、私が toggleClass("smallbox") を使用している理由です。smallbox クラスは私の CSS ファイルにあり、下向きの矢印の背景画像があります。これは、大きな div (パネル) が隠れた場所に滑り込んだときに、小さな div (btn-slide) に表示したい画像です。

これを機能させる唯一の方法は、CSS ファイルに移動し、「smallbox」CSS クラスの background-image の最後に !important を配置することですが、この効果のための適切な Jquery テクニックを知りたいです。 .

注: 小さい div (btn-slide) をクリックして、クリックするたびに背景画像を適切な矢印に変更できるようにしたいと考えています。

この効果を達成するにはどうすればよいですか?

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

更新：すべての返信に非常に感謝しています。わかりました。あなたのすべての返信で考えさせられたので、toggleClass 関数をもう一度見直したところ、コードが正しく機能するようになったと思います。これが私のCSSコードです。

#PANEL {
        width: 240px;
        height: 320px;
        background-color: #000000;
        margin: 0px auto;
    }

    #BUTTON {
        width: 100px;
        height: 50px;
        background-image:url(Arrow_Up.jpg);
        background-repeat: no-repeat;
        margin: 0px auto;
    }

    #BUTTON.GoUp {
        background-image:url(Arrow_Down.jpg);
    }

さて、明らかに私の間違いは、#BUTTON に新しいクラスを追加する代わりに、指定された background-image を使用してクラス .GoUp を単独で追加していたことです。コードを変更したところ、すべてが正しく機能するようになりました。

迅速な回答をありがとうございました。

4

3 に答える 3

0

!important を追加する方法は正しいです。div に 2 番目の background-image ディレクティブを導入しているため、どのディレクティブを使用するかを明示する必要があるため、重要です。

純粋な jQuery ソリューションが本当に必要な場合は、両方のバックグラウンド クラスを切り替えて、一度に 1 つだけがアクティブになるようにすることができます (これは、他のすべての css ディレクティブを両方のクラスに複製する必要があるため、良い解決策ではありません。これは常に悪い兆候）

または、css 関数を使用して背景を切り替えることもできます。

if($("div#btn-slide").css("background-image") == "uparrow.jpg") {
   $("div#btn-slide").css("background-image", "downarrow.jpg");
}
else $("div#btn-slide").css("background-image", "uparrow.jpg");
于 2011-10-05T23:51:56.947 に答える
0

CSSを投稿できますか？実際に !important を使用する必要はありませんが、'smallbox' クラス セレクターが 'btn-slide' ID よりも具体的であることを確認する必要があります。たとえば、CSS ファイルでは次のようになります。

#btn-slide { background: url(oldimage.png) }
#btn-slide.smallbox { background: url(newimage.png) }
于 2011-10-06T00:11:10.817 に答える