基于[Slick]滑块选择的加载div

Question

Slick滑块加载正常，下面的初始div内容按预期显示“ asdf”。现在单击任何滑块图像时，下面的div均不显示任何内容。第二个“ $（'。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();
        })
    });