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)"）不是一个好策略，您应该使用Content Security Policy来确保它不会运行任何内联函数。

第二，我相信你想要的东西对你编写的剧本来说太简单了。您只需要在img-inactive映像和以下jquery代码上插入style="display:none;"。

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

然后你可以再插入一些动画，就像淡入淡出一样。要做到这一点，你应该绝对定位图像，所以每对都在同一个位置。您可以在图像的不透明度属性上添加转场，并根据需要使用jquery玩具不透明度。

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

编辑：

您也可以使用toggleClass('img-active img-inactive');代替普通切换（）。这将交换类。我模糊地理解你的确切问题，所以如果这不能回答你的问题，也许你应该提供更多的信息。

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

1 个答案:

编辑：