jQuery .css不更改元素css

Question

我正在尝试制作一个图表，该图表相对于变量的数量改变大小。 此变量将根据用户打勾的复选框来增加和减少。 由于我已经在CSS中设置了高度以查看外观，因此这些图显示得很好，但是当我单击“ #submit”按钮时，什么也没有发生。 有人可以指出我代码中的问题吗？

码：

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

选择器.for not意味着要在class="for"元素内寻找标记<not> 。 要选择class="for not"元素，您需要使用.for.not 。

.css()代码的问题是您放了; 在px之后。 px; 不是有效的尺寸单位。 它是style属性或样式表的语法的一部分，但不是特定CSS属性的语法的一部分。

您也可以省略单位，因为jQuery默认为像素。 您也可以只调用.height()函数。

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

正如丹尼尔（Daniel）所说，不应该以这种方式尝试：

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

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

}

在这里尝试： https : //jsfiddle.net/zqn1rdmt/

Answer 3

$ {document）.ready

解决此问题的第一件事是将您的代码包装在document.ready函数中，以便我们确保您的代码在开始时就运行。

串联问题

然后，我修复了将像素值传递给.css（）函数的方式。

/* 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();

 });
 });