在 Chrome 中添加/删除类对我不起作用？答案

【问题标题】：add / remove class is not working for me in Chrome?在 Chrome 中添加/删除类对我不起作用？
【发布时间】：2016-04-22 07:02:08
【问题描述】：

好的，我有带有圆圈图像的地图区域，当我单击一个圆圈时，它会向右旋转并显示该国家/地区的内容，现在这在 safari 和 Firefox 中运行良好，但 chrome 没有响应，它不会删除该课程并没有向#circle 添加新课程，我需要一些帮助和解释。我尝试将 removeClass 更改为 removeAttr 但没有，任何其他解决方案，谢谢。

$('.state').click(function() {
  var id = $(this).data('id');
  $('#circle').removeClass('state1 state2 state3 state4 state5 rotate');
  $('#circle').addClass('state' + id);
  $('.stateDesc').hide(0);
  $('.state' + id).show('slow');
});

img.state1,
img.state2,
img.state3,
img.state4,
img.state5 {
  -moz-transition: all 1s ease !important;
  -webkit-transition: all 1s ease !important;
  -o-transition: all 1s ease !important;
  transition: all 1s ease !important;
}
img.state1 {
  -ms-transform: rotate(90deg) !important;
  -webkit-transform: rotate(90deg) !important;
  transform: rotate(100deg) !important;
}
img.state2 {
  -ms-transform: rotate(195deg) !important;
  -webkit-transform: rotate(195deg) !important;
  transform: rotate(205deg) !important;
}
img.state3 {
  -ms-transform: rotate(285deg) !important;
  -webkit-transform: rotate(285deg) !important;
  transform: rotate(295deg) !important;
}
img.state4 {
  -ms-transform: rotate(145deg) !important;
  -webkit-transform: rotate(145deg) !important;
  transform: rotate(155deg) !important;
}
img.state5 {
  -ms-transform: rotate(5deg) !important;
  -webkit-transform: rotate(5deg) !important;
  transform: rotate(15deg) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="state" class="row stateRow">
  <div class="col-lg-3 col-md-3 col-sm-1 col-xs-3 circleCont hide">
    <img src="images/Circle_PRG_Web.png" alt="circle" id="circle" class="state1" usemap="#stateLinks" />
    <map id="states" name="stateLinks">
      <area class="state" data-id="1" shape="circle" coords="58,11,10" alt="Usa" title="USA">
      <area class="state" data-id="2" shape="circle" coords="30,98,10" alt="Canada" title="Canada">
      <area class="state" data-id="3" shape="circle" coords="104,132,10" alt="Mexico" title="Mexico">
      <area class="state" data-id="4" shape="circle" coords="13,48,10" alt="Japan" title="Japan">
      <area class="state" data-id="5" shape="circle" coords="134,53,10" alt="China" title="China">
    </map>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-10 col-xs-6 stateBoth">
    <div class="stateLeft"></div>
    <div class="stateRight hide">
      <img src="images/dot.svg" alt="dot" class="stateDot dot" />
    </div>
    <div class="clear"></div>
    <div class="stateDesc state1"><span>USA</span>
      <p>Some dump text for usa ....</p>
    </div>
  </div>
</div>

【问题讨论】：

控制台有错误吗？如果您选择元素，您是否尝试过记录？
你能分享一下小提琴吗？
您似乎已向state 类添加了一个点击侦听器，但是您的代码没有任何“状态”类？
@Justinas，控制台中没有任何内容。
@Blackness 我还要指出，最初提供的代码缺少一些结束 </div> 标记。我添加它们是基于它们被复制+粘贴遗漏的假设，但如果你没有它们，那么这可能就是它在某些浏览器中不起作用的原因。

标签： javascript jquery css google-chrome

【解决方案1】：

试试这个：将你的脚本放在$(document).ready... 中，这将确保你的 DOM 准备就绪，然后脚本将被应用，见下文

$(document).ready(function(){
    $('.state').click(function() {
       var id = $(this).data('id');
       $( '#circle' ).removeClass('state1 state2 state3 state4 state5 rotate');
       $('#circle').addClass('state'+id);
       $('.stateDesc').hide(0);
       $('.state'+id).show('slow');
    });
});

【讨论】：

它在$(document).ready(function() { }里面，谢谢你的努力

【解决方案2】：

好的，我发现了问题，我使用的是 jQuery 插件 qTip2，当我删除下面的代码时效果很好，但现在我需要修复 qTip2 代码，这样我才能得到我的工具提示。

$('area').qtip({
    content: {
        text: $('map').attr("title")
    },
    position: {
        target: 'mouse'
    },
    style: { classes: 'myTooltip' }
});

感谢您的帮助。

编辑：

我加z-index: -1 !important; 到.myTooltip，它工作正常。

【讨论】：