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

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>

asdf
kljh
zxcv
ADF
$（文档）.ready（函数（）{
$（'.group'）.hide（）；
$（'#option1'）.show（）；
$（'#selectMe div'）。单击（函数（）{
$（'.group'）.hide（）；
var variable=$（this.attr（“value”）；
控制台日志（各种）；
$（'#'+各种）.show（）；
})
});
$（文档）.ready（函数（）{
$（'.carousel'）。光滑({
点：是的，
无限：错，
速度:300,，
幻灯片放映：7，
幻灯片滚动：7，
响应：[
{
断点：1024，
设置：{
幻灯片放映：6，
幻灯片滚动：6，
无限：是的，
圆点：对
}
},
{
断点：600，
设置：{
幻灯片放映：4，
幻灯片滚动：4
}
},
{
断点：480，
设置：{
幻灯片放映：3，
幻灯片滚动：3
}
}
]
});
});

拿着这个：

$(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();
        })
    });

---

请给我一个在你的编解码器JS中使用的库的链接，你不能在每个光滑的幻灯片中添加组元素吗？由于光滑的幻灯片可以接受HTML和图像，这样你就不需要额外的JS来同步这两个元素了。我不确定我是否在跟踪你。我正在尝试加载整个滑块下面的内容，基于滑块选择，您的建议如何避免JS代码？非常感谢，这很有效！我还在学习，现在需要学习一下您的代码；）我发现这个库会改变你的代码结构。您可以检查HTML代码并查看发生了什么