jQuery - 子divの背景イメージを選択してそれを修正する

私はjQueryを使ってdivの背景イメージを変更する方法を探していますが、それを完全に変更するわけではありません。jQuery - 子divの背景イメージを選択してそれを修正する

私を説明しましょう。

私はhttp://jqueryui.com/demos/sortable/#portletsを使用して、いくつかのdivの開閉を表示しています。ここでポートレットヘッダーをクリックすると、以下の内容が開き、閉じます。

ポートレットヘッダー内には、コンテンツの現在の状態に応じて矢印（上または下のいずれか）を表示する子divがあります。バックグラウンドイメージのURLの最後に "-visible"を追加することで、この子divの背景イメージを変更する方法が必要です。

私はこれをやってどこから始めるべきか知りませんでしたが、あなたが見るために以下にいくつかのコードを追加しました。そこフィドルから

、私は、ポートレット・ヘッダー内のポートレット矢印のdivの背景画像を変更する必要があります。私は単に一緒に背景画像を変更することはできませんが、私はここに投稿するためにそれを簡略化しました。

私はこれがあまりにも狭すぎて、stackoverflowで他の誰にも使われないことを望みます。

おかげ

2012-01-19 Undefined

は、たぶん私はここに何かが欠けているんだけど、あなたは、選択したjQueryオブジェクトのための.css属性修飾子を使用することはできませんか？ような何か：あなたは、クラス名そのものを修正するために探しているなら

var current_background = $("#my-div").css("background-image"); 
$("#my-div").css("background-image", current_background + "-visible");

、あなたはjQueryので.toggleClass()、.hasClass()、.addClass()と.removeClass()方法で周りの混乱を試すことができます。

私はこれが助けてくれることを願っていますが、私がこのマークを完全に忘れてしまった場合は教えてください！

2012-01-19 09:52:31

！私はあなたがcurrent_background + "目に見える"を使うことができることを知りませんでしたので、間違いなく私を起動させるでしょう – Undefined

素晴らしい、幸運！私は彼らのためにすべてを書き直しているのではなく、人々の学習を見て楽しんでいます。 –

私は、個人的にはCSSのクラスを使って背景画像を変更します。後で画像を変更する場合は、JavaScriptを変更する必要はありません。ビジュアル面ではなく、ウィジェットの動作をコード化するためにjavascriptを使用する方が良い解決策です。

だから、次のCSSを持っている：最初にクラスを追加し、あなたは開始が崩壊ウィジェット場合

$(".portlet-header").click(function() { 
    ... 
    $(this).parent().toggleClass('collapsed'); 
});

：

.portlet-header { 
    background-image: url(<an image>); 
} 

.portlet-header.collapsed { 
    background-image: url(<an other one>); 
}

はcollapsedクラスを切り替えるには、あなたはJavaScriptに次の行を追加します。大きな助けのおかげザッツ

2012-01-19 10:00:23

答えて