Как правильно рендерить изображение с помощью JQuery?

Question

[Александр Ivanov]

Необходимо расширить скрипт. Есть 3 кнопки, при нажатии на 1 и 2 появляется изображение дома, есть так же 3 кнопка, она работает, но при нажатии на неё ничего не появляется, а нужно, чтобы появлялось, изображение аналогичное по нажатию кнопки 1 и 2.
Скрипт

$(document).ready(function() {
    // нажатие на дом
    $('.houses-numbers__for-numbers__house').on("click", function () {
        if ($(this).hasClass('active'))
            return false;

        // какой хотим дом
        var newhouse = $(this).data('house');
        var oldhouse = $('.houses-numbers__for-numbers__house.active').data('house');
        $('.houses-numbers__for-numbers__house.active').removeClass('active');
        $(this).addClass('active');

        // установим текущий дом
        if (newhouse == 2)
            $('#page_plans').attr('data-current-house', 1);
	
        else
            $('#page_plans').attr('data-current-house', newhouse);
	

        // определим промежуточную переменную для второго дома (который копия первого)
        if (newhouse == 2)
            var newhouseshadow = 1;
        else
            newhouseshadow = newhouse;
	
	
        // если не перещелкнули с дома 1 на 2 или наоборот
        if (!((oldhouse == 1) && (newhouse == 2) && (oldhouse == 3)  || 
	      (oldhouse == 2) && (newhouse == 1) && (oldhouse == 3) 
	      (oldhouse == 2) && (newhouse == 3) && (oldhouse == 1)                                                       )) {
            // проверим - есть ли нажатые в этом доме
            var plan_d = $('.sections-floors[data-house="' + newhouseshadow + '"] .plan_d.active a');
            plan_d.click();
        }

        return false;
    });

    // нажатие на этаж дома
    $('.houses a, .dom_krug a').on("click", function () {
        var house = $(this).data('house');
        var floor = $(this).data('floor');

        // установим значение дома и этажа
        $('#currentPlanDom').val(house);
        $('#currentPlanEtazh').val(floor);

        // установим активный этаж на домиках
        if ((house == "A") || (house == "B")) {
            $('.sections-floors[data-house="1"] .plan_d').removeClass("active");
            $('#d' + house + floor).addClass("active");
            $('.sections-floors[data-house="1"] .plan_d').not(".active").css("display", "none");
        }
        else {
            $('.sections-floors[data-house="' + house + '"] .plan_d').removeClass("active");
            $('#d' + house + floor).addClass("active");
            $('.sections-floors[data-house="' + house + '"] .plan_d').not(".active").css("display", "none");
        }
        // управление кругляшкой на доме - активная/неактивная
        if ((floor == 4) && ((house == "A") || (house == "B")))
            $('#krugDom' + house).addClass("unhover");
        else
            $('.kvartiry_krug').removeClass("unhover");

        // покажем срез этажа
        var floor12 = (floor > 1) ? "2" : "1";
        $('.PlanBlock').removeClass("active");

        // покажем планиировки
        $('#PlanBlock' + house + floor12).addClass("active");

        // укажем ссылки для квартир-кружков относительно дома-этажа
        $("#krug1A a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/1A.jpg");
        $("#krug1B a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/1B.jpg");
        $("#krug1C a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/1C.jpg");
        $("#krug1D a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/1D.jpg");
        $("#krug2A a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/2A.jpg");
        $("#krug2B a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/2B.jpg");
        $("#krug6 a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/3.jpg");

        // укажем неактивные квартиры-кружки
        if ((floor == 1) && ((house == "A") || (house == "B"))) {
            $("#krug2B").addClass("inactive");
            $("#krug2B a").attr("href", "javascript: return false;");
            $("#krug2B a").removeClass("fancybox-buttons");
        }
        else if ($("#krug2B").hasClass("inactive")) {
            $("#krug2B").removeClass("inactive");
            $("#krug2B a").attr("href", "/img/plans/jpg/" + house + "/" + floor + "/2B.jpg");
            $("#krug2B a").addClass("fancybox-buttons");
        }

        return false;
    });

    // убирание мышки с планировки
    $('.PlanBlock .kvartira').on("mouseout", function () {
        HighlightKvartiraClear();
    });
});

/*
 * Для планировок
 */
function HightlightDomEtazh(dom, etazh, hide_other) {
    $(".plan_d").not(".active").css("display", "none");
    $('#d' + dom + etazh).css("display", "block");
}

function HighlightClear() {
    $(".plan_d").not(".active").css("display", "none");
}

function HighlightKvartiraClear() {
    $(".kvartira").not(".active").css("display", "none");
    $(".kvartiry_krug a.active").removeClass("active");
}
/*
 * Для планировок - квартиры
 */
function HightlightKvartira(kvartira) {
    // сбросим все выделенные квартиры
    HighlightKvartiraClear();
    
    $(".kvartira").css("display", "none");
    var dom = $('#currentPlanDom').val();
    var etazh = $('#currentPlanEtazh').val();
    
    if ((dom == 6) && (etazh >= 2))
        $('#kvartira' + dom + "2_" + kvartira).css("display", "block");
    else
        $('#kvartira' + dom + etazh + "_" + kvartira).css("display", "block");
    
    $('#krug' + kvartira + ' a').addClass("active");
}

Форма

<div id="plans_left">
        <!-- Номер дома -->
        <div class="houses-numbers">
            <h2>Номер дома</h2>
            
            <div class="houses-numbers__for-numbers"><a 
//ЭТО Я КНОПКА, КОТОРАЯ РАБОТАЕТ
                class="houses-numbers__for-numbers__house active"
                data-house="1"
                href="js:"
                >1</a><a 
                class="houses-numbers__for-numbers__house"
                data-house="2"
                href="js:"
                >2</a><a 
//ЭТО ТА САМАЯ КНОПКА, КОТОРАЯ ДОЛЖНА РАБОТАТЬ
                class="houses-numbers__for-numbers__house"
                data-house="3"
                href="js:"
                >3</a><a 
                class="houses-numbers__for-numbers__house houses-numbers__for-numbers__house_disabled"
                data-house="4"
                href="js:"
                >4</a><a 
                class="houses-numbers__for-numbers__house houses-numbers__for-numbers__house_disabled"
                data-house="5"
                href="js:"
                >5</a><a 
                class="houses-numbers__for-numbers__house"
                data-house="6"
                href="js:"
                >6</a><a
                class="houses-numbers__for-numbers__house houses-numbers__for-numbers__house_disabled"
                data-house="7"
                href="js:"
                >7</a><a 
                class="houses-numbers__for-numbers__house houses-numbers__for-numbers__house_disabled"
                data-house="8"
                href="js:"
                >8</a><a 
                class="houses-numbers__for-numbers__house houses-numbers__for-numbers__house_disabled"
                data-house="9"
                href="js:"
                >9</a>
            </div>
        </div>

Answer 1

[Александр Ivanov]

не актуально) вопрос решался через ксс