根据 [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();
        })
    });

根据 [Slick] 滑块选择加载 div

Load div based on [Slick] slider selection

javascript

css

jquery

slick.js