jquery визуализация исчезает и переупорядочивает определенные изображения

Question

Я сделал несколько рендеров комнаты в другой настройке освещения. Чем сделать 3 кнопки для управления освещением. Идея состоит в том, чтобы постепенно увеличивать или уменьшать конкретное изображение таким образом, чтобы я мог его включить, и при случайном освещении у меня есть все варианты изображения.

Нажмите кнопки слева направо, чтобы увидеть, что я имею в виду.

jsfiddle SCRIPT

я думал о 3 переменных

v1,v2,v3

и все е это может быть "1" или "0", поэтому я могу вызвать все переменные, например

"101"  <- mean that first and last light are on

и другая проблема состоит в том, чтобы изменить порядок изображений, чтобы сделать правильный под активным.

Кто-нибудь может помочь мне с этой проблемой?

Благодарю вас!

Answer 1

Ну, первое, что вы должны помнить, это fadeOut все ваши изображения, то fadeIn тот, который вы хотите в качестве исходного изображения. Затем сделайте то же самое, когда нажмете кнопку. Для более легкого подхода к jQuery я добавил фиктивный класс active на вашу кнопку вот так:

<a class="sim1 sim-button active" href="#">v1</a>     
<a class="sim2 sim-button active" href="#">v2</a>
<a class="sim3 sim-button active" href="#">v3</a>

Проверьте эту скрипку, ниже приведен мой код jQuery:

$(document).ready(function(){
    $("#sim-img img").each(function(){
        $(this).fadeOut(100);
    });
    var selected_image = ".i111";
    $(selected_image).fadeIn(1000);
    $(".sim-button").click(function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(this).addClass("active");
        }
        console.log("prev: "+selected_image);
        $(selected_image).fadeOut(1000);
        selected_image = ".i";
        $(".sim-button").each(function(){
            if($(this).hasClass("active")){
                selected_image += "1";
            }else{
                selected_image += "0";
            }
        });
        $(selected_image).fadeIn(1000);
        console.log("next: "+selected_image);
    });   
});