jquery - 使用 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

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