如何使javascript根据单击的缩略图更改主div？

我在静态块中列出了以下项目：

<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>

以及下面的缩略图导航块：

<div class="image-compare-nav owl-carousel owl-theme">
    <div class="owl-wrapper">
        <div class="owl-item">
            <a href="#" rel="image-compare-1" class="item"></a>
        </div>
        <div class="owl-item">
            <a href="#" rel="image-compare-2" class="item"></a>
        </div>
        <div class="owl-item">
            <a href="#" rel="image-compare-3" class="item"></a>
        </div>
        <div class="owl-item">
            <a href="#" rel="image-compare-4" class="item"></a>
        </div>
    </div>
</div>

目前，所有主要的220个块都显示在彼此的下方，但我希望只显示第一个块，单击缩略图时，相关的滑块div就会显示在它的位置上

重要的是，当单击每个缩略图时，滑块将从旧滑块更改为新滑块

到目前为止，我已经得到了这个，但是，当点击缩略图时，新的div没有出现，它们保持隐藏

我做错了什么

更新

我越来越接近这个小提琴：然而，我不能得到只有第一个主要部门显示在第一次。我尝试添加

样式：display:none

到第二个和第四个，但这不会使它们在单击缩略图时显示

---

有什么想法吗？

您可以使用

数据

属性，而不是使用类。然后，您可以抓取单击的拇指的

数据

属性，以便将其与要显示的图像的数据属性相关联

大概是这样的：

<div class="twentytwenty-container" data-image-num="1">
    <img />
</div>

<div class="imageSet" data-image-num="1">
    <img />
</div>


$('.imageSet').click(function() {
    var imageNum = $(this).attr('data-image-num');
    $('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});

$（'.imageSet'）。单击（函数（）{
var imageNum=$（this.attr（'data-image-num'）；
$（'.twentytwenty容器[data image num=“'+imageNum+'“]”）。show（）；
});

---

需要查看滑头初始化的jQuery。用于获取和设置

src

@Red2678更新了我的问题。@charlietfl您能解释一下吗，在哪里使用它，以及它会做什么吗？我建议使用

.data（）

而不是

.attr（）

，在这种情况下，比如：

$（this）。data（'image-num'）

。。。另外，避免使用连字符键。看到了吗，这看起来很有趣，但它并没有在加载另一个小div时删除大div？这段代码不会删除任何内容，它只是根据您单击的缩略图来显示/隐藏图像。谢谢，我更新了我的问题，以便在我创建了一个与我所要的内容相匹配的JSFIDLE之后，更清楚地了解我是什么。你能试一试吗，创造一个叉子？