Hinzufügen und Entfernen von CSS-Klassen mit jquery

Ich versuche, meine Fußzeile mit jQuery zu skalieren. Soweit ich das Fenster verkleinere, fügt es die Klasse nicht hinzu. Implementiere ich es richtig?Hinzufügen und Entfernen von CSS-Klassen mit 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>

Edit: eingebetteter Code in der Frage stattdessen einen Link zur Bereitstellung

Quelle

2016-10-06 Quesofat

Dies könnte ein Duplikat von http://stackoverflow.com/questions/9828831/jquery-on-window-resize sein (und selbst wenn nicht, könnte diese Antwort hilfreich sein). Vielleicht möchten Sie auch herausfinden, wo das Problem liegt. Wirf ein 'console.log ('foo')' 'in deinen Resize-Handler; Wenn Sie nicht sehen, dass "foo" beim Ändern der Größe geloggt wird, wissen Sie, dass der Handler das Problem ist. Wenn Sie es sehen, wissen Sie, dass das Problem mit der Logik im Handler ist. – machineghost

Zusätzlich zum @machineghost-Kommentar müssen Sie in Stackoverflow den Code eingeben, den Sie ausprobiert haben. – SaidbakR

@ sємsєм Um fair zu sein, hat er es getan, es ist nur schwer zu erkennen ("Link Beschreibung hier eingeben" Links zu einem Pastebin). Zeigt nur, wie wichtig es ist, eine Frage vollständig * vor * Posting zu schreiben, anstatt zu hetzen und zu versuchen, es danach zu beheben (ein Fehler, den ich auch manchmal zu machen habe). – machineghost

Sie haben eine Reihe von gleichen ID-Parameter für Li und i-Tags, die jquery alle Elemente der gleichen ID wählen verhindert, so dass sie Klassen machen wie folgt

<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>

Dann

$(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-Code geändert verwenden die 0

Quelle

2016-10-07 00:39:44

Wenn ich dies das Javascript (ich console.logged es implementieren) aber es gibt scheinbar keine Änderung in der CSS oder zumindest wie es aussieht. – Quesofat

Sie keinen Fall enthalten war, wenn es notwendig ist, eine eine Klasse zu löschen, andere zu bilden eine Arbeit. Toggle-Klasse sollte es beheben.

Edit: Toggle funktioniert in diesem Fall nicht. Sie haben eine andere Lösung zu verwenden:

$(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"); 
 
    } 
 
    }); 
 
});

Quelle

2016-10-07 00:00:54

Hinzufügen und Entfernen von CSS-Klassen mit jquery

Antwort

Verwandte Themen