2017-09-30 1 views
0

Guter Tag angewandt ändern,addClass() erfolgreich ist, nicht auf Seitenelement

ich ein HTML-Formular, das ich zu bestimmten Zeiten validieren möchte:

  • zu markt focusin() Veranstaltung Eingang;
  • auf einem Ereignis focusout() eines Eingangs;
  • , wenn auf die Submit-Eingabe geklickt wird;
  • usw.

Zum Beispiel kann ich eine CSS-Klasse, „ausgewählt“, an einen Eingang hinzufügen, wenn es ein focusIn() Ereignis ausgelöst, aber die Eingabe die Mehrklasse widerzuspiegeln nicht visuell ändern. Ich habe getestet, ob die Klasse hinzugefügt wurde, und hasClass("selected") gibt TRUE zurück.

Nach ein paar Stunden verschiedener Ansätze und der Suche im Internet hoch und niedrig, kann ich nicht herausfinden, warum die Klasse hinzugefügt wird, aber die Seite ändert sich nicht visuell.


Ich glaube nicht, es ist ein Problem mit der Art, wie ich die CSS und Javascript importieren.

Das style.css in den Kopf eingeführt, wie folgt: wie folgt in den Kopf eingeführt werden

<style rel="stylesheet" type="text/css">@import url("../css/style.css");</style> 

Die JQuery und script.js:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="../js/script.js"></script> 

Here is a functioning codepen for the page.


Jede Hilfe wird geschätzt.

+0

Es gibt hier nichts, das Verhalten zeigen, aber wenn Sie sprechen über die '.show 'Klasse in Ihrem CodePen, es wird von der viel spezifischere' .form1 p .invalid-Nachricht' Regel überschrieben, die 'display: keine' –

+0

auf den Fokus, ich sehe linken Rand wird angewendet –

+0

@PaulRoub Ah Ich habe den Vorrang damals nicht verstanden. Ich dachte, indem ich die .show-Klasse dem Span hinzufüge, würde es einfach das "display: none" überschreiben, das in .form1 p .invalid-Nachricht gefunden wird. Ich denke, ich werde alle meine addClass() zu css() ändern, um dies zu beheben. – user1038988

Antwort

0

erwartete Ergebnis zu erzielen, verwenden Sie unter Option spezifischere CSS für die .selected Klasse hinzufügen

.form1 p input.selected { 
    border-left-width: 8px; 
} 

https://codepen.io/nagasai/pen/borGvB

+0

Super, das funktioniert. Vielen Dank. – user1038988

+0

Froh meine Antwort hat dir geholfen :) –

Verwandte Themen