jQuery addClassがIDと連携していません

Question

私はクリック機能で非常に簡単なaddClass()を持っていて、なぜ動作しないのだろうと思っていました。 $('#wicked')を$('div')に変更すると、クリック機能が正常に動作します。

$(document).ready(function() { 
 
    $('#wicked').click(function() { 
 
    $(this).addClass('blueBack'); 
 
    }); 
 
});

#wicked { 
 
    background-color: #ABCDEF; 
 
    font-size: 20px; 
 
    border-radius: 20px; 
 
    border-style: none; 
 
    padding: 25px; 
 
} 
 
.blueBack { 
 
    border-color: #000; 
 
    border-style: solid; 
 
}

<div id="wicked">Test Button</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script type='text/javascript' src='app.js'></script>

Answer 1

これは、実際にはうまく働いています。 CSSはあなたのスタイルを単純に上書きしています。

css idでは、classよりも高い優先度を持ちます。したがって、idの枠線スタイルはnoneであることがルールよりも重要であるか、またはsolid境界がclassにあることが重要です。