如何使用基于索引的jQuery更改类？

马特兰盖

我正在尝试在Shopify上创建一个具有webp支持的画廊（长期而言）。

我在那儿有99％，图像显示正确。我只需要根据单击的缩略图来更改某些类。

有一个创建所有“主”图像的液体循环，所有栏的第一个栏都有一个隐藏其的“主图像隐藏”类。

另一个液体循环创建缩略图，第一个循环具有缩略图活动类，该类将不透明度设置为0.5以显示其活动状态。

我对如何做到有一个清晰的想法。例如，如果单击带有data-slide-index =“ 3”的缩略图，则会发生以下情况：+索引为3的主图像删除了“ main-image-hidden”类+主图像（以前处于活动状态）获取类别“ main-image-hidden” +索引为3的缩略图获取类别“ thumb-active” +缩略图（之前处于活动状态）失去类别“ thumb-active”（索引必须为明显的原因！）

有没有足够的人为我指出正确的方向呢？

提前致谢。

'''

    <div class="popup-gallery center" style="max-height:500px; padding-bottom: 10%;">
      {%- for image in product.images -%}
      {% assign webp_url = image.src | img_url: '1x1' | replace: 'products', 'files' | split: 'x' %}

    <a href="{{ webp_url[0] }}x1000.webp" alt="{{ image.alt }}"  class="main-image {% if forloop.first == false %}main-image-hidden{% endif %}" data-slide-index="{{ forloop.index0 }}">

        <picture>
          <source type="image/webp" class="lazy"
                  data-src="{{ webp_url[0] }}x500.webp 1x"
                  data-srcset="{{ webp_url[0] }}x1000.webp 2x,
                               {{ webp_url[0] }}x500.webp 1x">
          <img alt="{{ image.alt }}" class="lazy" 
               data-src="{{ webp_url[0] }}x500.png 1x" 
               data-srcset="{{ webp_url[0] }}x1000.png 2x,
                            {{ webp_url[0] }}x500.png 1x">
        </picture>
        <noscript>
          <img alt="{{ image.alt }}" src="{{ webp_url[0] }}x50.png">
        </noscript>
      </a>
      {%- endfor -%}
    </div>


    {%- if product.images.size > 1 -%}

    <div class="center">
      {%- for image in product.images -%}
      {% assign webp_url = image.src | img_url: '1x1' | replace: 'products', 'files' | split: 'x' %}

      <div style="padding: 0 1%; display:inline-block;" class="thumb {% if forloop.first %}thumb-active{% endif %}" data-slide-index="{{ forloop.index0 }}">

        <picture>
          <source type="image/webp" class="lazy"
                  data-src="{{ webp_url[0] }}x50.webp 1x"
                  data-srcset="{{ webp_url[0] }}x100.webp 2x,
                               {{ webp_url[0] }}x50.webp 1x">
          <img alt="{{ image.alt }}" class="lazy" style="max-height:50px"
               data-src="{{ webp_url[0] }}}x50.png 1x" 
               data-srcset="{{ webp_url[0] }}x100.png 2x,
                            {{ webp_url[0] }}x50.png 1x">
        </picture>
        <noscript>
          <img alt="{{ image.alt }}" src="{{ webp_url[0] }}x50.png">
        </noscript>
      </div>
      {%- endfor -%}
    </div>

    {%- endif -%}


  </div>

'''

我尝试了各种时间，但可以考虑到索引。

伊丽莎白

我想我知道你想做什么。您可以将CSS属性选择器与jQuery一起使用，以查找值为的元素data-slide-index。这个活动对您有用吗？

$('.thumb').click(function() {
    var index = $(this).attr('data-slide-index');

    $('.main-image').addClass('main-image-hidden');
    $('.main-image[data-slide-index=' + index + ']').removeClass('main-image-hidden');

    $('.thumb-active').removeClass('thumb-active');
    $(this).addClass('thumb-active');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。