Блог

Я зацикливаю список людей и показываю каждого из них. Когда вы нажимаете на один из них, он показывает вам их биографию. Я боролся с сокрытием окна биографии, потому что div продолжает возвращаться в прежнее состояние. Я могу без проблем ДОБАВЛЯТЬ классы, но, похоже, не могу их удалить. Что-то связанное с прекращением пропаганды?

 <div class="layout" id="{{ uuid }}">
    <h2 class="title-52">{{ people_list_title }}</h2>

    <div class="md:flex flex-wrap md:-mx-3 xl:-mx-6.25 mt-10 ">


        {{ people }}
        <div class="person">
            <div>
                <a
                    class="circle block relative m-auto overflow-hidden w-52 h-52 2xl:w-58.25 2xl:h-58.25 hover:bg-primary">
                    <img class="image filter grayscale" src="{{ image }}">
                    <span class="icon hidden absolute bottom-0 right-0">
                        <span
                            class="w-12.5 h-12.5 flex items-center justify-center bg-black transition-all duration-500 ease-in-out">
                            <svg class="text-white fill-current" width="16" height="10" viewBox="0 0 16 10" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.377 4.243L9.125 1l1.003-1 5.015 5-5.015 5-1.003-1 3.353-3.343H.858V4.243h11.52z" />
                            </svg>
                        </span>
                    </span>
                </a>
                <div class="pt-2.5 flex flex-col gap-y-2.5 text-center">
                    <a>
                        <strong class="title-22">{{ name }}</strong>
                        <p class="leading-7">{{ role }}</p>
                    </a>
                </div>
            </div>

            <!-- **THIS IS THE BIO BOX** PERSON LIGHT BOX-->
            <div id="personLightbox" class="personLightbox bg-black fixed h-screen w-screen inset-0 transition duration-500 bg-opacity-70 opacity-0 z-0 top-0 left-0 flex justify-center p-20 pointer-events-none">
                
                <div class="lg:w-200 bg-white p-8 pt-12.5 md:pb-20 md:px-20 relative">

                    <div class="cursor-pointer absolute right-0 top-0 z-50">
                        <p id="closeBtn" class="button btn-closed btn-secondary">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M4.857 6L0 10.857 1.143 12 6 7.143 10.857 12 12 10.857 7.143 6 12 1.143 10.857 0 6 4.857 1.143 0 0 1.143 4.857 6z" />
                            </svg>
                        </p>
                    </div>

                    <div class="flex flex-col md:flex-row justify-center md:justify-start items-center gap-x-5">
                        <div class="w-43.25 h-43.25 filter grayscale rounded-full border bg-center border-red-500"
                            style="background-image: url({{ image }}); background-size: cover;">

                        </div>
                        <div class="mt-10 md:mt-0 flex flex-col gap-y-2.5">
                            {{ if role }}
                            <span class="label block">{{ role }}</span>
                            {{ /if }}
                            <span class="title-32 leading-8 block">{{ name }}</span>
                            <span class="flex justify-start items-center gap-x-2.5 mt-2 text-base">
                                <svg width="19" height="15" viewBox="0 0 19 15" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M17.943.56c.416.36.69.857.771 1.402l-9.34 6.044-9.34-6.044A2.303 2.303 0 012.306 0h14.139c.55.002 1.082.2 1.499.56zM9.375 9.375c.12 0 .238-.034.34-.1l9.035-5.847v9.267A2.309 2.309 0 0116.444 15H2.306A2.308 2.308 0 010 12.695V3.429l9.036 5.846c.1.066.219.1.339.1z"
                                        fill="#000" />
                                </svg>
                                {{ if email }}
                                {{ email }}
                                {{ /if }}
                            </span>
                        </div>
                    </div>

                    <div class="mt-10">
                        {{bio}}
                    </div>

                </div>
            </div>
        </div>
        {{ /people }}


    </div>

</div>


<script>


**THIS IS DISPLAYING THE CORRECT BIO DEPENDING ON WHICH ONE IS CLICKED**

    $(".person").click( function() {

        $(".personLightbox", this ).removeClass("opacity-0 z-0 pointer-events-none").addClass("opacity-100 z-40 pointer-events-auto fixed");

    });




**THIS SHOULD BE HIDING THE BIO**

    $("#closeBtn").click( function(){
        
        $(".personLightbox").removeClass("opacity-100 z-40 pointer-events-auto fixed").addClass("opacity-0 z-0 pointer-events-none");

        console.log("hello2");

    });


</script>