JSFiddle

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显示在其中＃39的地方。

重要的是，在点击每个缩略图时，滑块会从旧的缩略图更改为新的缩略图。

到目前为止，我已经得到了这个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();
});

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

1 个答案:

JSFiddle