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

}); 
});