用jQuery切换背景图像

时间:2011-07-13 23:28:54

标签: jquery css image html background

我的大脑围成一圈试图解决这个问题 - 我想我需要有更大脑的人的帮助!不可否认,我是一个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)");
    });
});

4 个答案:

答案 0 :(得分: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");

答案 1 :(得分:1)

使用css类来应用背景图像而不是在javascript中进行硬编码会很健康。在申请当前点击时,只需从其他div中删除此类。

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

答案 2 :(得分:1)

试试这个,它应该重置当前的。

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

答案 3 :(得分:0)

尝试将所有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)");
    });
});