使用Slick切换beforeChange事件上的图像

Question

我试图弄清楚如何根据Slick事件之一的单击元素显示和隐藏一些图像。

<div class="items" id="icons-tabs">

        <a href="javascript:void(0)" class="item iconClicked" data-tab="tab0">
            <img src="/researchicon.png" alt="" class="img-active">
            <img src="/researchKOSelected.svg" alt="" class="img-inactive">
        </a>

        <a href="javascript:void(0)" class="item iconClicked" data-tab="tab1">
            <img src="/WideRange.png" alt="" class="img-active">
            <img src="/WideRangeUpSelected.svg" alt="" class="img-inactive">
        </a>

        <a href="javascript:void(0)" class="item iconClicked" data-tab="tab2">
            <img src="/SSI_toolbox.png" alt="" class="img-active">
            <img src="/toolboxKOSelected.svg" alt="" class="img-inactive">
        </a>

        <a href="javascript:void(0)" class="item iconClicked" data-tab="tab3">
            <img src="/PricingIcon.png" alt="" class="img-active">
            <img src="/PricingIconUpSelected.svg" alt="" class="img-inactive">
        </a>

</div>

如您在该标记中所看到的，有些图像具有img-active类，它们是文档准备好后用户将看到的图像。

该组图像如下所示：

我需要的是，当您单击图像时，它必须隐藏当前图像并显示带有img-inactive类的图像，因此它必须像img-inactive和img-active之间的类交换。

到目前为止，我所做的是：

$mobSlick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    $('a[data-tab="tab'+nextSlide+'"] > img')
        .first()
        .addClass('img-inactive')
        .removeClass('img-active');

    $('a[data-tab="tab'+currentSlide+'"] > img')
        .first()
        .addClass('img-active')
        .removeClass('img-inactive');

    $('a[data-tab="tab'+nextSlide+'"] > img')
        .not(":eq(0)")
        .addClass('img-active')
        .removeClass('img-inactive');

    $('a[data-tab="tab'+currentSlide+'"] > img')
        .not(":eq(0)")
        .addClass('img-inactive')
        .removeClass('img-active');
});

这段代码的问题在于，当您从左到右单击项目时，它几乎可以正常工作，但是当您从右到左或完全没有顺序进行操作时，它将崩溃。

有什么建议么？

Answer 1

您使这种方式太难了。

首先，内联javascript（ href="javascript:void(0)" ）不是一个好方法，您应该使用内容安全策略来确保它没有运行任何内联的东西。

其次，我认为您想要的对于您编写的脚本来说太简单了。 您只需要插入style="display:none;" 在img无效图片和以下jquery代码上。

`$('.iconClicked').click(function() {
    $(this).children().toggle();
});`

然后，您可以再次向其中插入一些动画，例如淡入淡出。 为此，应绝对放置图像，使每对图像位于同一位置。 您可以在图像的opacity属性上添加过渡效果，并根据需要使用jquery使用opacity进行玩具化。

如果同时将一个设置为1，将另一个设置为0，则图像将半透明一段时间。 为避免这种情况，应将一个图像设置为不透明度1，并设置一个计时器（使用setTimout），然后将另一个图像更改为0。

编辑：

您还可以使用toggleClass('img-active img-inactive'); 而不是普通的toggle（）。 这将互换类。 我含糊地理解了您的确切问题，因此，如果这不能回答您的问题，也许您应该提供更多信息。