jQuery点击时为has-transform类元素设置z-index失效如何解决？

你直接通过css()方法修改z-index不生效主要是两个常见原因：

• 原有CSS规则中.has-transform的z-index设置带了!important标记，普通行内样式优先级不足以覆盖
• 你只写了设置为99的逻辑，没有做切换判断，第二次点击无法恢复初始值

更推荐通过新增CSS类的方式实现需求，可维护性更高，也能解决样式优先级问题：

1. 新增自定义z-index控制类 #

在你的<style>标签内添加以下规则：

.toggle-z-index {
  z-index: 99 !important;
}

2. 修改点击事件逻辑，同步切换控制类 #

修改<script>内的点击回调，和你现有的transform类切换同步执行即可：

(function($) {
  $(document).ready(function(){
    $('#transform_target').click(function(){
      $('.has-transform').toggleClass('toggle-transform-animation toggle-z-index');
    });    
  });
})( jQuery );

如果你确实需要直接通过css()方法修改，需要同时处理切换逻辑，覆盖!important优先级可以写为$('.has-transform').css('z-index', '99 !important')，但类控制方案更方便后续样式调整，优先推荐。

内容的提问来源于stack exchange，提问作者Alyx Perry