单击下一个缩略图时删除内联样式

Question

一位客户正在使用 Product Gallery 扩展，并且想要以下内容：

点击缩略图时，缩略图必须显示在特色图片位置；
当点击当前特色图片时，图片必须展开到灯箱中。

我通过添加 lightbox.js、将相应的 link 放在产品图库图像周围并使用以下代码来设法兼顾这两个功能：

jQuery(".thumb-link").click(function() {
  setTimeout(function() {
      var visibleImage = document.getElementsByClassName('gallery-image visible')[0].id;
      jQuery(a[data-lightbox=" + visibleImage + "]").attr('style', 'position: absolute; left: 0; right: 0; bottom: 0; top: 0;');
  }, 100);
});

它的作用是获取当前特色图片的ID，它始终带有classes gallery-image和visible。每个缩略图都有 class thumblink。我添加了超时，因为否则会检测到前一个元素的 ID，并且它会扩展前一个图像的 lightbox-link，而不是新选择的图像。

但是，每当单击另一个缩略图时，我无法创建的是删除内联 CSS。有谁知道我会怎么做？

Answer 1

我通过从内联 CSS 到添加 CSS-class 到 jQuery 并在超时前删除它来修复它。代码如下：

JS

jQuery(".thumb-link").click(function() {
    // Remove Class from Current Featured Image
    var visibleImage = document.getElementsByClassName('visible')[0].id;
    jQuery(a[data-lightbox=" + visibleImage + "]").removeClass('currentLink');

    // Set Class for New Featured Image
    setTimeout(
        function() {
            var visibleImage = document.getElementsByClassName('visible')[0].id;
            jQuery(a[data-lightbox=" + visibleImage + "]").addClass('currentLink');
        },
        100);
});

CSS

a.currentLink {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

如果有人有更有效的建议，我很乐意阅读！

单击下一个缩略图时删除内联样式

Remove inline-styles when clicked on the next thumbnail

javascript

jquery

lightbox

image-gallery

JS

CSS