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

add / remove class is not working for me in Chrome?

本文关键字：不起作用 Chrome 删除 添加      更新时间：2023-09-26

好的，我有带有圆圈图像的地图区域，当我单击圆圈时，它会向右旋转并显示该国家/地区的内容，现在这在 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>

试试这个：把你的脚本放在$(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');
    });
});

好的，我发现了问题，我正在使用 jQuery 插件 qTip2，当我在下面删除这段代码时，它工作得很好，但现在我不想修复 qTip2 代码，以便我可以获取我的工具提示。

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

感谢您的帮助。

编辑：

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

相关文章：