Загрузка div на основе слайдера [Slick]

Question

Ползунок Slick загружается нормально, а начальное содержимое div ниже показывает «asdf», как и ожидалось.Теперь, когда я нажимаю на любое изображение слайдера, элемент ниже ничего не показывает2-й "$ ('. Group'). Hide ();"по-видимому, выполняется правильно, но не код после, так что это не должно иметь никакого отношения к самому слайдеру.Я пробовал разные подходы за последние 4 часа и просто не могу понять это.

    <div class="carousel" id="selectMe">
            <div value="option1"><img src="image1.jpg"></div>
            <div value="option2"><img src="image2.jpg"></div>
            <div value="option3"><img src="image3.jpg"></div>
            <div value="option4"><img src="image4.jpg"></div>
    </div>

    <div id="option1" class="group">asdf</div>
    <div id="option2" class="group">kljh</div>
    <div id="option3" class="group">zxcv</div>
    <div id="option4" class="group">adfs</div>


    <script>
        $(document).ready(function () {
            $('.group').hide();
            $('#option1').show();
            $('#selectMe div').click(function () {
                $('.group').hide();
                var various = $(this).attr("value");
                console.log(various);
                $('#' + various).show();
            })
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.carousel').slick({
                dots: true,
                infinite: false,
                speed: 300,
                slidesToShow: 7,
                slidesToScroll: 7,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 6,
                            slidesToScroll: 6,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 4
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3
                        }
                    }
                ]
            });
        });
    </script>

Answer 1

возьми это:

$(document).ready(function () {
        $('.group').hide();
        $('#option1').show();
        $('#selectMe div').click(function (ev) {

            console.log($(ev.currentTarget).attr("value") )
            if (!$(ev.currentTarget).attr("value")) {
                return
            }
            $('.group').hide();
            var various = $(this).attr("value");

            console.log(various);
            $('#' + various).show();
        })
    });