Javascript 不透明度和z索引滑块工作不正常

我对JQuery还很陌生。 我正在使用一个滑块，单击拇指时显示图像。 现在，我给拇指和完整图像指定了一些数据角色，这样，如果单击拇指3号，数据id 3的完整图像将设置为不透明度1，z索引将变大。 不知何故，滑块在第一次单击拇指时起作用，但当我第二次单击时，图像不会显示，它与拇指具有相同的i。 这是我的密码

HTML

还有我的Css

.productsSliderImage {
    position: absolute;
    z-index: 1;

    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

试试看

CSS

.animate{
   zIndex:33;
   opacity:1
}

脚本

$('.thumbs').click(function () {
    var thumbId = $(this).data("thumbid"); //use data function    
    // remove class for all products
    $('.productsSliderImage').removeClass('animate');
    // set current product image class to overlap
    $('.productsSliderImage[data-fullImageId="'+thumbId+'"]').addClass('animate');
});

---

您总是可以使用想要添加的属性（如z索引和不透明度）创建一个类，而不是编写冗长的代码。 您可以使用addClass（）和removeClass（）方法来实现这一点。 读这里

---

谢谢。

所以基本上你可以这样做 .动画

{ 废话废话 } 然后我使用jquery，您可以使用类似于onclick（）的内容

和删除类的方法相同。

---

谢谢

请创建一把小提琴。对不起，我是新来的，我不知道如何创建小提琴。谢谢！这是很有帮助的。基本上，无论你用css做什么，都可以打包在一个文件中，像附加和分离东西一样使用。谢谢

.animate{
   zIndex:33;
   opacity:1
}

$('.thumbs').click(function () {
    var thumbId = $(this).data("thumbid"); //use data function    
    // remove class for all products
    $('.productsSliderImage').removeClass('animate');
    // set current product image class to overlap
    $('.productsSliderImage[data-fullImageId="'+thumbId+'"]').addClass('animate');
});

$('#abc').addClass('animation');