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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

用jQuery切换背景图像

4 个答案: