Warum verzerrt das Ändern der Klasse eines Elements die Ansicht?

Question

Ich versuche, eine Klasse eines Elements zu ändern und meine Ansicht wird verzerrt? Wie löse ich es?

Ich habe die Geige für die gleiche erstellt Jsfiddle

Problem Beschreibung:

Ich habe eine benutzerdefinierte Textbox. Ich habe einen Referenzwert in der oberen linken Ecke. Wenn ich den Wert größer oder kleiner als den Referenzwert eintrage, zeige ich ein Kästchen mit der Frage nach dem Grund an.

Es funktioniert einwandfrei, aber wenn ich versuche, einige zusätzliche Funktionen hinzuzufügen, wie die Farbe des div in der rechten oberen Ecke des Textfelds durch Ändern der Klasse des div ändern, ist die Ansicht verzerrt und nicht wie erwartet .

In der Geige kann ich den Code in JavaScript-Abschnitt an der Linie 73,74,77,78 kommentiert

function changeClassOfCommentToRed(divId){ 
//$("#"+divId).removeClass(); 
//$("#"+divId).addClass("commentCornerRed"); 
} 
function changeClassOfCommentToGreen(divId){ 
//$("#"+divId).removeClass(); 
//$("#"+divId).addClass("commentCornerGreen"); 
} 

wenn ich die obige Zeile für zusätzliche Funktionalität Kommentar-, erhalte ich ein verzerrtes Bild, wie in folgendem Bild

Answer 1

Versuchen angeben, welche Klasse in Ihrer removeClass zu entfernen:

removeClass('classToRemove'); 

Answer 2

Wenn ich was Frage cor bekommen direkt. Ich denke, diese commentCornerRed Klasse bekam width: 0 und height: 0. Sie können die gleichen Eigenschaften wie .arrow_box

.commentCornerRed { 
    position: absolute; 
    width: 0; 
    height: 0; 
    display: block; 
    border-style: solid; 
    border-width: 0 10px 10px 0; 
    border-color: transparent #ff0000 transparent transparent; 
    padding-left: 36px; 
    cursor: pointer; 
} 

haben Sie es so machen kann.

.commentCornerRed { 
    position: absolute; 
    background: #bcb476; 
    border: 1px solid #08090a; 
    z-index: 1; 
    margin-left: 50px; 
    margin-top: -40px; 
} 

Answer 3

Sie nur die Klassen, die Sie ändern möchten, entfernen müssen, um:

function changeClassOfCommentToRed(divId){ 
    $("#"+divId).removeClass("commentCornerGreen commentCornerRed"); 
    $("#"+divId).addClass("commentCornerRed"); 
} 
function changeClassOfCommentToGreen(divId){ 
    $("#"+divId).removeClass("commentCornerGreen commentCornerRed"); 
    $("#"+divId).addClass("commentCornerGreen"); 
} 

Und Sie in Ihrem CSS benötigen Pfeil Pseudo-Element nicht das Element selbst zu adressieren:

.commentCornerRed:after { 
    ... 
} 
.commentCornerGreen:after { 
    ... 
} 

Mit diesen Änderungen wird nur die Farbe der Pfeile geändert, nicht die Farbe der Box.

Answer 4

Ich machte einen dummen Fehler. Ich habe die falsche ID für den Klassennamen übergeben. Erhalten Sie das gewünschte Ergebnis, indem Sie die richtige ID in Zeile 85 und 87 im JavaScript-Abschnitt übergeben.

Wechsel von

function handleCommentBox(event){ 
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){ 
    changeClassOfCommentToGreen(returnIdPrefix(event)+"r1"); 
    }else{ 
    changeClassOfCommentToRed(returnIdPrefix(event)+"r1"); 
    } 
} 

zu

function handleCommentBox(event){ 
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){ 
    changeClassOfCommentToGreen(returnIdPrefix(event)+"c1"); 
    }else{ 
    changeClassOfCommentToRed(returnIdPrefix(event)+"c1"); 
    } 
} 

das Problem gelöst. Danke Leute für die Hilfe.