使用jQuery切換背景圖片

我的大腦圍繞着這個圈子試圖弄清楚這一點 - 我想我需要一個有更大腦的人的幫助！無可否認我是一名jQuery新手，所以我希望我的問題的解決方案非常簡單。我正在嘗試編寫一些代碼來切換div的背景圖像（它已被樣式表指定爲引入：hover函數）。我正在影響的div也可以在問題/回答情況下切換其他div。使用jQuery切換背景圖片

目前，我已經設法進入舞臺（使用下面的代碼）jQuery能夠按照預期改變背景圖像（在這種情況下，從綠色'/img/bg/nav-giclee.png '黑'/img/bg/nav-down.png'）;

但是我所需要的只是其中一個div在任何時候都是黑色的，也就是說選中時。在被點擊並變成黑色之後，即使點擊了替代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)"); 
    }); 
});

來源

2011-07-13 sketch360

$(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)"); 
    }); 
});

阿爾斯o，我會建議添加/刪除一個CSS類，而不是手動設置background-image - 你可能會發現比你不得不修改更多的屬性，即。邊境。

UPDATE

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

來源

2011-07-13 23:35:14

嗨@Jakub Konecki感謝您的回覆 - 我嘗試了所有的解決方案，並立即開始工作！謝謝。但是，我同意你添加/刪除CSS類的建議，而不是自己設置背景圖像（本頁面的其他一些解決方案也提示它）。你能否介紹一下如何修改下面的代碼來影響CSS類呢？（「。background-image」，「url（/img/bg/nav-giclee.png）」）。eq（i）.css（「background-image」，「url（ /img/bg/nav-down.png）「）; – sketch360

@ sketch360 - 更新了我的回答 –

嗨Jakub，再次感謝。我遇到了一個我並不期待的新難題 - 獲得另一個元素來觸發與「問題」按鈕相同的「答案」框...即，如果您查看頁面http：//www.sketch360test .co.uk/giclee.php ...並點擊'Giclee - 流程'，我在那裏有一張圖片「選擇你的論文」，我想切換當前由' '論文'按鈕。我試圖自己做（代碼位於/js/fiddle.js），但儘管我可以讓'answer'div切換，但它不會顯示正確的'answer'面板。 – sketch360

嘗試「正在重置」所有的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)"); 
    }); 
});

來源

2011-07-13 23:34:27

這將是健康的使用CSS樣式，而不是硬編碼在JavaScript的背景圖像。在申請當前被點擊的同時，從其他div中刪除此類。

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

來源

2011-07-13 23:37:11 algiecas

試試這個，它應該重置當前的一個。

<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>

來源

2011-07-13 23:42:11 b01

使用jQuery切換背景圖片

回答

相關問題