根据布尔属性动态添加/删除一个类

Question

我正在尝试制作图像src（ .zoomimg src em>）从另一个img属性的值获得其“值” (.image-zoom data-zoom) 哪个父级 (.ma​​in-slider .slick- slide) 在其属性 ('aria-hidden') 转变为 (="false") 时发生变化。

HTML：

<div class="main-slider slick-slider">
    <div class="slick-slide activated" aria-hidden="false">
        <span>
            <img class ="image-zoom" src="s/files/firstpicture_480x480.jpeg" data-zoom="s/files/firstpicture_1024x1024.jpeg">
            <img class="zoomImg" src="s/files/firstpicture_1024x1024.jpeg">
        </span>
    </div>  
    <div class="slick-slide" aria-hidden="true">
        <img class ="image-zoom" src="s/files/secondpicture_480x480.jpeg" data-zoom="s/files/secondpicture_1024x1024.jpeg">
    </div>
    <div class="slick-slide" aria-hidden="true">
        <img class ="image-zoom" src="s/files/thirdpicture_480x480.jpeg" data-zoom="s/files/thirdpicture_1024x1024.jpeg">
    </div>
</div>

<div class="navigation-slider slick-slider">
    <div class="slick-slide" aria-hidden="false">
        <img class ="image-zoom" src="s/files/firstpicture_240x240.jpeg"
    </div>  
     <div class="slick-slide" aria-hidden="false">
        <img class ="image-zoom" src="s/files/secondpicture_240x240.jpeg">
    </div>
     <div class="slick-slide" aria-hidden="false">
        <img class ="image-zoom" src="s/files/thirdpicture_240x240.jpeg">
    </div>
</div>

到目前为止，我设法通过课程（“。激活”）进行初始零件，这是（' aria-hidden 主滑块图像div 的属性设置为（=“ false ”），但一旦幻灯片更改，（ aria-hidden="false") 切换到新的幻灯片父级，一切都崩溃了。

JQUERY：

$('.main-slider .slick-slide').filter('[aria-hidden="false"]').addClass('activated');

$(document).ready(function () { //ZOOMSCRIPT
    $(".activated .image-zoom")
    .wrap('<span style="display:inline-block"></span>')
    .css("display", "block")
    .parent()
    .zoom({
    url: $(this).find("img").attr("data-zoom"),
    });
});

能否请您帮我弄清楚如何在 aria-hidden="true" 时删除此类，并自动将其重新分配给 aria-hidden="false 的新图像的父级“？

Answer 1

好的，所以我尝试了这段代码，它似乎是一种更好的方法，但我无法让它工作（'slider-for' 是容器的名称）：

$(document).ready(function() {
  
     function initZoom() { 
        $('.image-zoom')
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom({
            url: $(this).find("img").attr("data-zoom")
        });
     }
  
         $('.slider-for').on('afterChange', function() {
          $(".image-zoom").trigger("zoom.destroy");
          alert('slide change');
          initZoom();
        });  
  
  
});