0
こんにちはみんな私のスクリプトは完璧に動作していますが、私はこの小さな厄介な問題を解決したいが、私は可能かどうかはわかりません。jqueryを使用して入力値の代わりに配列またはswitch文からの条件
私のようなこのフォーム要素を持っている、ラジオとチェックボックスよう、データリストと入力タイプを選択私は条件文をコーディングする方法は、私は私の問題は、どのような場合は原因発生し、その値に依存しているということです私は後で値を変更する？私は自分のコードを変更する必要があります。
例は、私は、ユーザーが、ユーザーが今
$('input:radio[name="meal-356"]').change(function(ev) {
if ($(this).val() == 'Burger with fries') {
var meal = 20;
} else {
var meal = 30;
}
$('#meal').text((meal).toFixed(2)).trigger('change');
});
「フライドポテトとバーガー」を選択した場合、彼らは
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
<label class="radio">
<input name="meal-356" value="Burger with fries" type="radio"/>
Burger with fries
</label>
</div>
<div>
<label class="radio">
<input name="meal-356" value="Chicken with rice" type="radio" />
Chicken with rice</label>
</div>
をたい食事を選択し、どちらか彼らは例を選択するために値を追加する必要があり、このラジオ入力を持っています私が望むのは、入力値に頼るのではなく、単に配列を使うことができますか、それとも難しいか、入力値が変更されたときに手動でコードを編集する必要がないように、簡単なソリューションを提案できます。
ここで事前のおかげで私の完全なスクリプトは、私はあなたが[key,value]ペアを利用Mapデータ型を使用することをお勧め
$(document).ready(function() {
$('input:radio[name="meal-356"]').change(function(ev){
if ($(this).val() == 'Burger with fries') {
var meal = 20;
}
else {
var meal = 30;
}
$('#meal').text((meal).toFixed(2)).trigger('change');
});
$('input:radio[name="drinks-123"]').change(function(ev){
if ($(this).val() == 'Ice Tea') {
var drinks = 1;
}
else if ($(this).val() == 'Coke') {
var drinks = 1.20;
}
else if ($(this).val() == 'Lemonade') {
var drinks = 2;
}
else if ($(this).val() == 'Water') {
var drinks = 1.75;
}
else if ($(this).val() == 'Hot choco') {
var drinks = 3;
}
else if ($(this).val() == 'Hot coffee') {
var drinks = 1.25;
}
else {
var drinks = 0;
}
$('#drinks').text((drinks).toFixed(2)).trigger('change');
});
$('input:radio[name="extras-781"]').change(function(ev){
if ($(this).val() == 'Rice') {
var extras = 10;
}
else if ($(this).val() == 'Gravy') {
var extras = 5;
}
else {
var extras = 0;
}
$('#extras').text((extras).toFixed(2)).trigger('change');
});
$('textarea[name="spoon-112"]').keyup(function(ev){
var spoon = $(this).val().replace(/\n/g, '<br/>');
\t \t var spoon = spoon*.25;
$("#spoon").text(spoon).trigger('change');
});
$('input:text[name="fork-143"]').keyup(function(ev){
var fork = $(this).val().replace(/\n/g, '<br/>');
\t \t var fork = fork*.5;
$("#fork").text(fork).trigger('change');
});
$('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) {
return acc + +val.textContent ;
}, 0);
$('#total').text(total.toFixed(2));
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
<label class="radio"><input name="meal-356" value="Burger with fries" type="radio"/>Burger with fries</label>
<br />
<label class="radio"><input name="meal-356" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>
<h2>Question 2: drinks</h2>
<div class="drinks-123-wrapper">
<input type="radio" name="drinks-123" value="Ice Tea" /> Ice Tea
<input type="radio" name="drinks-123" value="Coke" /> Coke
<input type="radio" name="drinks-123" value="Lemonade" /> Lemonade
<input type="radio" name="drinks-123" value="Water" /> Water
<input type="radio" name="drinks-123" value="Hot choco" /> Hot choco
<input type="radio" name="drinks-123" value="Hot coffee" /> Hot coffee
<input type="radio" name="drinks-123" value="No drinks-123" /> No drinks-123
</div>
<h2>Question 3: extras</h2>
<div class="drinks-wrapper">
<input type="radio" name="extras-781" value="Rice" /> Rice
<input type="radio" name="extras-781" value="Gravy" /> Gravy
<input type="radio" name="extras-781" value="No Extra" /> No Extra
</div>
<h2>Question 4: How many extra spoon?</h2>
<div class="spoon-wrapper">
<textarea name="spoon-112" rows="3"></textarea>
</div>
<h2>Question 5: How many extra fork?</h2>
<div class="fork-wrapper">
<input name="fork-143" type="text" value="" placeholder=""/>
</div>
<hr />
<div class="price-wrapper">
<b>meal:</b> <span id="meal"></span>
<div></div>
<b>drinks:</b> <span id="drinks"></span>
<div></div>
<b>extras:</b> <span id="extras"></span>
<div></div>
<b>spoon:</b> <span id="spoon"></span>
<div></div>
<b>fork:</b> <span id="fork"></span>
</div>
<div class="total-wrapper">
<h3>
<b>Total:</b><span id="total"></span>
</h3>
</div>
'の' –