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装置来寻找标签<not>的元件内侧class="for"。要选择一个含有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

正如丹尼尔说应该是.for.not和尝试这样的：

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

}); 
});