时间戳

首页 > 解决方案 > JQuery 在点击时设置 z-index

javascript - JQuery 在点击时设置 z-index

问题描述

我正在使用此代码来控制元素的转换。单击时，我希望将任何具有 has-transform 类的内容设置为高 z-index，例如 99。再次单击应将 z-index 设置回其原始值。

我尝试将此添加到单击功能，但没有效果： $('.has-transform').css('z-index', 99);

/// 编码 ///

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  #transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

<script>
(function($) {
  $(document).ready(function(){
    $('#transform_target').click(function(){
      $('.has-transform').toggleClass('toggle-transform-animation');
    });    
  });
})( jQuery );   
</script>

标签： javascriptjqueryz-index

解决方案

如果 class 有 1 个以上的元素'.has-transform'，则 $('.has-transform') 将返回一个可迭代的集合。

这个集合中的每个项目都需要单独处理，每个项目都应该有自己的 toggleClass 方法，称为：

$('.has-transform').each(function(){
    $(this).toggleClass('toggle-transform-animation');
    // where this is an item of the collection
});

推荐阅读