使用 jQuery 切换背景图像

Question

我的大脑在想办法解决这个问题 - 我想我需要大脑更大的人的帮助！诚然，我是 jQuery 新手，所以我希望我的问题的解决方案相当简单。我正在尝试编写一些代码来切换 div 的背景图像（样式表已指定它以引入 :hover 函数）。我正在影响的 div 还可以在问题/答案情况下切换其他 div。

目前，我已经成功地达到了 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)");
    });
});

Answer 1

尝试将所有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 2

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

另外，我建议添加/删除 CSS 类，而不是手动设置 background-image - 你可能会发现你必须修改更多属性，即。边框。

更新

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

Answer 3

使用 css 类来应用背景图像而不是在 javascript 中硬编码是健康的。并在应用到当前被点击时从其他 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>