jQueryで背景画像を切り替える

Question

私の脳は、これを理解しようとする円で回っています - 私はより大きな脳を持つ人の助けが必要だと思います！確かに私はjQuery初心者ですので、私の問題に対する解決策はかなり簡単です。私はdivの背景イメージを切り替えるコードを書くことを試みています（これは既に：hover関数を導入するためにスタイルシートによって指定されています）。私が影響を与えているdivは、質問/回答の状況で他のdivを切り替える機能も持っています。

現在のところ、jQueryが意図したとおりに背景画像を変更する段階（次のコードを参照）があります（この場合、緑色の '/img/bg/nav-giclee.png 'to black' /img/bg/nav-down.png '）;

私が必要とするのは、divの1つだけがいつでも黒になることです。すなわち、選択されたときです。クリックされて黒に変わった瞬間、別のDIVがクリックされてもdivは黒のままです。私が目指しているのは、他のDIVの背景画像をリセットするためにDIVをクリックすることです（表示/非表示の質問/回答機能を妨げないようにしています）。私はこの説明を過度に複雑にしましたか？

作業ページがである：すべての慈悲深い助けを事前にhttp://sketch360test.co.uk/giclee.php/ ...多くの感謝...

私は今のところ使用しているjQueryのは、次のとおりです。

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

$(function() { 
    $("#answer .views-row").hide(); 
    $("#question .views-row").click(function(){ 
     var i = $(this).index(); 
     $("#answer .views-row").eq(i).toggle("slow").siblings().hide(); 
     $(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)"); 
    }); 
}); 

Answer 1

$(function() { 
    $("#answer .views-row").hide(); 
    $("#question .views-row").click(function(){ 
     var i = $(this).index(); 
     $("#answer .views-row").eq(i).toggle("slow").siblings().hide(); 
     $(".question").css("background-image", "url(/img/bg/nav-giclee.png)").eq(i).css("background-image", "url(/img/bg/nav-down.png)"); 
    }); 
}); 

にクリックされた1代を設定し、その後アルスo、私は手動でbackground-imageを設定するのではなくCSSクラスを追加/削除することをお勧めします - あなたはもっと多くのプロパティを変更しなければならないかもしれません。境界。代わりにJavaScriptでそれをハードコーディングの背景画像を適用するCSSクラスを使用して健康的になり

UPDATE

$(".question").removeClass("selected").eq(i).addClass("selected"); 

Answer 2

'reseting' お試しください元へのdivの背景のすべて、および黒

$(function() { 
    $("#answer .views-row").hide(); 

    var views_row = $("#question .views-row"); 
    views_row.click(function(){ 
     var i = $(this).index(); 
     $("#answer .views-row").eq(i).toggle("slow").siblings().hide(); 

     // Add this line... 
     views_row.css("background-image", "url(/img/bg/nav-giclee.png)"); 
     $(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)"); 
    }); 
}); 

Answer 3

。現在クリックされているクラスに適用している間に、他のdivからこのクラスを削除するだけです。

$(".view-row").removeClass("backgroundDown"); 
$(".view-row").eq(i).addClass("backgroundDown"); 

Answer 4

これを試すと、現在の設定がリセットされます。

<style type="text/css"> 
    .backgroundDown { 
     background-image: url(/img/bg/nav-down.png); 
    } 
</style> 
<script type="text/javascript"> 
    jQuery.fn.fadeToggle = function(speed, easing, callback) { 
     return this.animate({opacity: 'toggle'}, speed, easing, callback); 
    }; 

    $(function() { 
    $("#answer .views-row").hide(); 
    $("#question .views-row").click(function(){ 
     var i = $(this).index(); 
     $("#answer .views-row").eq(i).toggle("slow").siblings().hide(); 
     //$(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)"); 
     $(".question .backgroundDown").removeClass("backgroundDown"); 
     $(".question").eq(i).addClass("backgroundDown"); 
    }); 
}); 
</script>