添加/刪除類不適用於Chrome瀏覽器嗎？

Question

好的，我的地圖區域帶有圓圈圖像，當我單擊一個圓圈時，它會向右旋轉並顯示該國家/地區的內容，現在在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> 

Answer 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');
    });
});

Answer 2

好的，我找到了問題，我使用的是jQuery插件qTip2，當我在下面刪除此代碼時，它的效果很好，但現在我需要修復qTip2代碼，這樣我才能獲得工具提示。

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

感謝幫助。

編輯：

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