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

Posted 2023-05-08

【中文标题】根据布尔属性动态添加/删除一个类

【英文标题】：Dynamically add/remove a class a div depending on a boolean attribute

【发布时间】：2021-09-18 03:41:32

【问题描述】：

我正在尝试制作图像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 的新图像的父级“？

【问题讨论】：

欢迎您！你确定这是最好的方法吗？我的意思是你检查了光滑的滑块可用事件吗？你可以使用 *** sn-ps 或 JsFiddle、Codepen.. 吗？这将有助于我们可视化您提到的过渡，并希望为您提供最佳解决方案。

我做到了，在 slick 的文档中他们提到了“beforeChange”和“afterChange”，我尝试初始化缩放，然后在“afterChange”上销毁它，然后重新初始化它，但没有成功。你能检查下面的答案并告诉我你的想法吗？

【参考方案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();
        );  
  
  
);

   

【讨论】：

这个想法很明确......但是你能分享一个sn-p ..你的css样式吗？ *** 中有一个 sn-p 编辑器，你最好习惯它:)