Javascript 使用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>

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

---

有什么建议吗？

你这样做太难了

首先，内联javascript（

href=“javascript:void（0）”

）不是一个好策略，您应该使用它来确保它不运行任何内联内容

第二，我相信你想要的对你写的剧本来说太简单了。您只需在img非活动图像和以下jquery代码上插入

style=“display:none；”“

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

然后，您可以再次向其插入一些动画，如“淡入淡出”。要做到这一点，你应该绝对定位图像，使每一对都在同一点上。您可以在图像的不透明度属性上添加转换，并根据需要使用jquery玩弄不透明度

如果同时将一个设置为“不透明度1”，另一个设置为0，则图像在一段时间内将是半透明的。为了防止出现这种情况，您应该将一个图像设置为不透明度1，并设置一个计时器（带有setTimout），然后将另一个图像更改为0

编辑：

---

您还可以使用

toggleClass（'img-active-img-inactive'）而不是普通切换（）。这将交换类。我模糊地理解你的确切问题，因此如果这不能回答你的问题，也许你应该提供更多信息。
你能提供一把小提琴来演示这个问题吗？@mjw我试图使用更巧妙的事件，以便在用户在滑块之间导航时隐藏和显示一些图像。这是一个非常大的组成部分。我不确定我是否能用一把简单的小提琴演奏。如果每张幻灯片都有#图标选项卡，为什么不使用平滑索引并根据该索引查询元素？是的，它是这样工作的。但是，如果我点击一个图像，我需要其余的图像处于其默认形状。只有当前图像中应该有新类。检查此示例：当前单击的图像为蓝色，其余为默认形状。我这样做是因为我依赖于滑动滑块的事件。这样就不行了！
`$('.iconClicked').click(function() {
    $(this).children().toggle();
});`