如何使javascript更改主div取决于单击哪个缩略图？

Question

我有以下项目的静态块：

<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>

目前，所有主要的二十个街区都出现在彼此的下面，但我想要发生的是，只有第一个显示，当点击缩略图时，相关的滑块div就显示在它的位置上。

重要的是，当每个缩略图被点击，滑块从旧的，到新的。

到目前为止，我已经得到了这个http://jsfiddle.net/96rq4vet/2/，但是，当点击缩略图时，新的div没有出现，它们就会隐藏起来。

我做错了什么？

更新

我越来越接近这个小提琴:然而，http://jsfiddle.net/96rq4vet/3/，我不能得到第一个主div显示在一开始。我试着将style:display:none;添加到第二个--第四个，但这并不使它们在点击缩略图时显示出来。

有什么想法吗？

Answer 1

您可以使用data属性，而不是使用类。然后，您可以获取单击的拇指的data属性，以便将其与要显示的图像的数据属性关联起来。

就像这样：

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

JSFiddle