[英]Change slider to select box
我遇到問題,試圖弄清楚如何將我的bmi計算器從幻燈片更改為選擇框,然后傳遞該輸入以進行計算。
對於英尺,我將英寸設置為值,然后在選擇英寸時,需要將它們加到英尺上以總計。
<div class="form-group">
<label for="height-ft">Feet</label>
<select name="height-ft" id="height-ft" class="form-control">
<option value="12">1'</option>
<option value="24">2'</option>
<option value="36">3'</option>
<option value="48">4'</option>
<option value="60">5'</option>
<option value="72">6'</option>
<option value="84">7'</option>
</select>
</div>
<div class="form-group">
<label for="height-in">Inches</label>
<select name="height-in" id="height-in" class="form-control">
<option value="1">1"</option>
<option value="2">2"</option>
<option value="3">3"</option>
<option value="4">4"</option>
<option value="5">5"</option>
<option value="6">6"</option>
<option value="7">7"</option>
<option value="8">7"</option>
<option value="9">9"</option>
<option value="10">7"</option>
<option value="11">7"</option>
</select>
</div>
JS Fiddle: jquery ui幻燈片的工作示例。 http://jsfiddle.net/ypyxrks8/
任何幫助轉換此將不勝感激。
如果您所尋求的幫助只是將英寸增加到英尺,那么請將這行代碼添加到您的計算按鈕中,單擊:
var total = parseInt($('#height-ft').val()) + parseInt($('#height-in').val());
這樣就可以得到英寸的總數。
您基本上已經擁有了。 該滑塊正在做一些事情來獲取值,但是您可以使用parseInt()獲得值。 我必須添加一個轉換因子以使其正確,並且您需要填寫離散的重量值,但這是代碼:
[HTML]
<div class="container">
<div class="row">
<div class="col-md-12"> <strong>Height:</strong>
<div class="form-group">
<select name="height-ft" id="height-ft" class="form-control">
<option value="12">1'</option>
<option value="24">2'</option>
<option value="36">3'</option>
<option value="48">4'</option>
<option value="60">5'</option>
<option value="72">6'</option>
<option value="84">7'</option>
</select>
</div>
<div class="form-group">
<select name="height-in" id="height-in" class="form-control">
<option value="1">1"</option>
<option value="2">2"</option>
<option value="3">3"</option>
<option value="4">4"</option>
<option value="5">5"</option>
<option value="6">6"</option>
<option value="7">7"</option>
<option value="8">7"</option>
<option value="9">9"</option>
<option value="10">10"</option>
<option value="11">11"</option>
</select>
</div>
</div>
<div class="col-md-12"> <strong>Weight:</strong>
<select name="weight-in" id="weight-in" class="form-control">
<option value="100">100</option>
<option value="120">120</option>
<option value="140">140</option>
<option value="160">160</option>
<option value="180">180</option>
<option value="200">200</option>
<option value="220">220</option>
<option value="240">240</option>
<option value="260">260</option>
<option value="280">280</option>
<option value="300">300</option>
</select>
<br>
</div>
<div type="button" id="calculatebutton" class="btn btn-primary">Calculate</div>
<div id="result"></div>
</div>
[CSS]
/* BMI Calculator */
$('#calculatebutton').click(function () {
var weight = parseInt($('#weight-in').val()),
heightInches = parseInt($('#height-ft').val()) + parseInt($('#height-in').val()),
heightsqaured = (heightInches) * (heightInches),
result = ((weight) / (heightsqaured) * 703);
debugger;
if (result < 16) {
var rating = ('You are severely underweight');
} else if (result > 16 && result < 18.5) {
var rating = ('You are underweight');
} else if (result > 18.5 && result < 25) {
var rating = ('You are healthy');
} else if (result > 25 && result < 30) {
var rating = ('You are overweight');
} else if (result > 30 && result < 35) {
var rating = ('You are moderately obese');
} else if (result > 35 && result < 40) {
var rating = ('You are severely obese');
} else if (result > 40 && result < 80) {
var rating = ('You are very severely obese');
} else if (result > 80) {
var rating = ('This result seems unlikely, please check that the information you have entered is correct');
}
$('#result').html('Your BMI is ' + result.toFixed(1) + '. ' + rating + '.');
});
此處的工作版本: https : //jsfiddle.net/W3AVE/ypyxrks8/7/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.