jqueryでCSSクラスを追加および削除する

Question

jqueryでフッタをサイズ変更しようとしています。これまでのところ、ウィンドウのサイズを変更してもクラスは追加されません。私はそれを正しく実装していますか？

/* My jQuery: */ 
 

 
$(document).ready(function() { 
 
\t $(window).on('resize', function(){ 
 
\t \t var win = $(this); 
 
    \t if (win.width() > 600) { 
 
    \t \t $("#anc").addClass('social-lg'); 
 
    \t \t $("#ico").addClass("icon-lg"); 
 
    \t } else { 
 
    \t \t $("#anc").addClass('social-sm'); 
 
    \t \t $("#ico").addClass("icon-sm"); 
 
    \t \t } 
 
\t }); 
 
});

/* My CSS: */ 
 

 
.social-lg div.col-md-12 > ul > li > a { 
 
    border: 2px solid #616161; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    letter-spacing: normal; 
 
    text-align: center; 
 
    height: 4.25rem; 
 
    width: 4.25rem; 
 
} 
 
.icon-lg div.col-md-12 > ul > li > a > i { 
 
    padding-top: .5rem; 
 
    font-size: 2em; 
 
} 
 
.social-sm div.col-md-12 > ul > li > a { 
 
    border: 2px solid #616161; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    letter-spacing: normal; 
 
    text-align: center; 
 
    height: 3.25rem; 
 
    width: 3.25rem; 
 
} 
 
.icon-sm div.col-md-12 > ul > li > a > i { 
 
    padding-top: .5rem; 
 
    font-size: 1.5em; 
 
}

<!-- My HTML: --> 
 

 
<div class="row" id="footer"> 
 
    <div class="col-md-12"> 
 
    <ul> 
 
     <li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li> 
 
     <li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li> 
 
     <li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> 
 
     <li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> 
 
     <p>Lorem Ipsum</p> 
 
    </ul> 
 
    </div> 
 
</div>

編集：質問内側に埋め込まれたコードの代わりに、リンク

Answer 1

あなたが同じidのすべての要素を選択するためにjqueryのを防ぐ同じid李のパラメータとIタグの数を持っているので、彼らにクラスを作る：あなたは別のソリューションを使用する必要があります

<div class="row" id="footer"> 
      <div class="col-md-12"> 
       <ul> 
        <li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li> 
        <li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li> 
        <li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> 
        <li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> 
        <p>Lorem Ipsum</p> 
       </ul> 
      </div> 
     </div> 

そして

$(document).ready(function() { 
    $(window).on('resize', function() { 
    var win = $(this); 
    if (win.width() > 600) { 
     $(".anc").addClass('social-lg').removeClass('social-sm'); 
     $(".ico").addClass("icon-lg").removeClass("icon-sm"); 
    } else { 
     $(".anc").addClass('social-sm').removeClass('social-lg'); 
     $(".ico").addClass("icon-sm").removeClass("icon-lg"); 
    } 
    }).trigger("resize"); //this to force first event on load 
}); 

修飾JavaScriptコードを使用し、以下のように0

Answer 2

を提供する別のものを作るために1つのクラスを削除する必要があるときあなたはケースが含まれていませんでした1つの仕事。トグルクラスで修正する必要があります。

編集：この場合、トグルは機能しません。

$(document).ready(function() { 
 
    $(window).on('resize', function() { 
 
    var win = $(this); 
 
    if (win.width() > 600) { 
 
     $("#anc").addClass('social-lg'); 
 
     $("#ico").addClass("icon-lg"); 
 
     $("#anc").removeClass('social-sm'); 
 
     $("#ico").removeClass("icon-sm"); 
 
    } else { 
 
     $("#anc").addClass('social-sm'); 
 
     $("#ico").addClass("icon-sm"); 
 
     $("#anc").removeClass('social-lg'); 
 
     $("#ico").removeClass("icon-lg"); 
 
    } 
 
    }); 
 
});