jQuery .css Element nicht ändern css

Question

Ich versuche ein Diagramm zu erstellen, das die Größe relativ zur Größe einer Variablen ändert. Diese Variable erhöht und verringert sich je nachdem, welches Kontrollkästchen der Benutzer aktiviert hat. Die Graphen werden in Ordnung angezeigt, da ich die Höhe in CSS bereits eingestellt habe, um zu sehen, wie sie aussehen. Wenn ich jedoch auf die Schaltfläche "#submit" klicke, passiert nichts. Könnte jemand auf das Problem in meinem Code hinweisen?

Code:

//Vote count variables 
 
var ag = 2; 
 
var nag = 0; 
 

 
//Make only one checkbox tickable. 
 
$('input[type="checkbox"]').on('change', function() { 
 
    $('input[type="checkbox"]').not(this).prop('checked', false); 
 
}); 
 

 
//Function to refresh the charts with new vote amounts. 
 
function refreshChart() { 
 
    $(".for").css({ 
 
    'height': ag * 60 + 'px;' 
 
    }); 
 
    $(".for not").css({ 
 
    'height': nag * 60 + 'px;' 
 
    }); 
 
} 
 

 
//Refresh the charts for user on submit click. 
 
$('#submit').click(function() { 
 
    if ($('#c1').prop('checked') == true) { 
 
    ag += 1; 
 
    } 
 
    if ($('#c2').prop('checked') == true) { 
 
    nag += 1; 
 
    } 
 
    refreshChart(); 
 

 
});

.results { 
 
    color: #111; 
 
    display: show; 
 
    align-items: center; 
 
} 
 

 
.for { 
 
    display: block; 
 
    margin: 0 auto; 
 
    background-color: #27AE5F; 
 
    width: 20px; 
 
    height: 100px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    font-size: 11px; 
 
    color: #fff; 
 
} 
 

 
.not { 
 
    background-color: #c0392b; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkcont"> 
 

 
    <div class="styleC"> 
 
    <input id="c1" type="checkbox"> 
 
    <label for="c1"> </label> 
 
    </div> 
 
    <p> I agree that the restrictions placed on imported cars should be removed or limited. </p> <br> 
 
    <div class="styleC"> 
 
    <input id="c2" type="checkbox"> 
 
    <label for="c2"> </label> 
 
    </div> 
 
    <p> I believe the current restrictions and regulations should not be altered. </p> 
 
</div> 
 
</div> 
 
<div class="results"> 
 
    <h2> The Current Standings of Opinions Submitted </h2> 
 
    <div class="for"> 
 
    <p class="resultsNo yes"> 2 </p> 
 
    </div> 
 
    <div class="for not"> 
 
    <p class="resultsNo no"> 0 </p> 
 
    </div> 
 

 
</div> 
 
<a id="submit"> Submit </a> 
 
</div> 
 
</div>

Answer 1

Der Wähler .for not bedeutet mit class="for" für den Tag <not> in einem Elemente zu suchen. Um ein Element mit class="for not" auszuwählen, müssen Sie .for.not verwenden.

Das Problem mit dem .css() Code ist, dass Sie ; nach px setzen. px; ist keine gültige Größeneinheit. Es ist Teil der Syntax eines style Attributs oder eines Stylesheets, aber nicht Teil der Syntax einer bestimmten CSS-Eigenschaft.

Sie können das Gerät auch auslassen, da jQuery standardmäßig auf Pixel eingestellt ist. Sie können auch einfach die .height() Funktion aufrufen.

//Vote count variables 
 
var ag = 2; 
 
var nag = 0; 
 

 
//Make only one checkbox tickable. 
 
$('input[type="checkbox"]').on('change', function() { 
 
    $('input[type="checkbox"]').not(this).prop('checked', false); 
 
}); 
 

 
//Function to refresh the charts with new vote amounts. 
 
function refreshChart() { 
 
    $(".for").height(ag * 60); 
 
    $(".for.not").height(nag * 60); 
 
} 
 

 
//Refresh the charts for user on submit click. 
 
$('#submit').click(function() { 
 
    if ($('#c1').prop('checked') == true) { 
 
    ag += 1; 
 
    } 
 
    if ($('#c2').prop('checked') == true) { 
 
    nag += 1; 
 
    } 
 
    refreshChart(); 
 

 
});

.results { 
 
    color: #111; 
 
    display: show; 
 
    align-items: center; 
 
} 
 

 
.for { 
 
    display: block; 
 
    margin: 0 auto; 
 
    background-color: #27AE5F; 
 
    width: 20px; 
 
    height: 100px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    font-size: 11px; 
 
    color: #fff; 
 
} 
 

 
.not { 
 
    background-color: #c0392b; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkcont"> 
 

 
    <div class="styleC"> 
 
    <input id="c1" type="checkbox"> 
 
    <label for="c1"> </label> 
 
    </div> 
 
    <p> I agree that the restrictions placed on imported cars should be removed or limited. </p> <br> 
 
    <div class="styleC"> 
 
    <input id="c2" type="checkbox"> 
 
    <label for="c2"> </label> 
 
    </div> 
 
    <p> I believe the current restrictions and regulations should not be altered. </p> 
 
</div> 
 
</div> 
 
<div class="results"> 
 
    <h2> The Current Standings of Opinions Submitted </h2> 
 
    <div class="for"> 
 
    <p class="resultsNo yes"> 2 </p> 
 
    </div> 
 
    <div class="for not"> 
 
    <p class="resultsNo no"> 0 </p> 
 
    </div> 
 

 
</div> 
 
<a id="submit"> Submit </a> 
 
</div> 
 
</div>

Answer 2

Als Daniel sagte, es .for.not werden sollte, und versuchen Sie es dies wie:

function refreshChart() { 
    $(".for").css('height', ag * 60 + 'px'); 

    $(".for.not").css('height', nag * 60 + 'px'); 

} 

versuchen Sie es hier: https://jsfiddle.net/zqn1rdmt/

Answer 3

$ (Dokument) .ready

Das erste, was ich getan habe, um dies zu beheben, war, dass ich Ihren Code in eine document.ready-Funktion verpackte, damit wir sicherstellen können, dass Ihr Code am Anfang ausgeführt wird.

Verkettungs Probleme

Ich reparierte dann so, wie Sie auf die CSS- die Pixelwerte wurden vorbei() Funktion.

/* You will want to wrap your code in document.ready so that your js runs when the page is done loading */ 
$(document).ready(function(){ 
//Vote count variables 
var ag = 2; 
var nag = 0; 

//Make only one checkbox tickable. 
$('input[type="checkbox"]').on('change', function() { 
    $('input[type="checkbox"]').not(this).prop('checked', false); 
}); 

//Function to refresh the charts with new vote amounts. 
function refreshChart(){ 
    /* Not sure if the way you were doing it previously was wrong (using an object), but 
    * I know for a fact that the following method works (by using two parameters) 
    * Your main issue was that you were using ag * 60 + 'px;'. The problem with that 
    * is that javascript tries to add the result of ag * 60 and the string 'px'. This 
    * is not desired behaviour. 
    */ 
    $(".for").css('height',[ag * 60,'px'].join('')); 
    $(".for.not").css('height', [nag * 60,'px;'].join('')); //added .for.not change 
} 

//Refresh the charts for user on submit click. 
$('#submit').click(function(){ 

    if ($('#c1').prop('checked') == true){ 
     ag += 1; 
    } 
    if ($('#c2').prop('checked') == true){ 
     nag += 1; 
    } 
    refreshChart(); 

}); 
});