Переключение фонового изображения с помощью 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

Попробуйте, это должно сбросить текущий.

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

Попробуйте «переустановить» все фоны divs к оригиналу, а затем установите черный цвет у кликаемого человека

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