我对javascript有点新鲜。我希望动态地将总值乘以天数值。尝试了一段时间，但无法找到解决方案。提前致谢。
$(document).ready(function() {
$('.kalorie').click(function() {
var varKalorie = $('input[name=kalorie]:checked').val()
$('.posilki').prop("disabled", false);
if (varKalorie == 1000) {
$('.posilki').click(function() {
var total = 0;
$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val());
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});
$('#total').html(total);
});
}
if (varKalorie == 1250) {
$('.posilki').click(function() {
var total = 0;
$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.1;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});
$('#total').html(total + 'pln');
});
}
if (varKalorie == 1500) {
$('.posilki').click(function() {
var total = 0;
$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.2;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});
$('#total').html(total + 'pln');
});
}
if (varKalorie == 2000) {
$('.posilki').click(function() {
var total = 0;
$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.4;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});
$('#total').html(total + 'pln');
});
}
if (varKalorie == 2500) {
$('.posilki').click(function() {
var total = 0;
$('.posilki:checked').each(function() {
var posilkiChecked = $('.posilki:checked').length;
if (posilkiChecked >= 3) {
posilkiEach = parseFloat($(this).val()) * 1.6;
total += posilkiEach;
$('.qtyminus').prop("disabled", false);
$('.qtyplus').prop("disabled", false);
} else {
total = "Musisz zaznaczyc przynajmniej 3 dania";
}
});
$('#total').html(total + 'pln');
});
}
});
console.log($('#total').text());
// This button will increment the value
$('.qtyplus').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name=' + fieldName + ']').val(0);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name=' + fieldName + ']').val(0);
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2 class="global-title">Cennik</h2>
<input type="radio" name="kalorie" class="kalorie" value="1000" />1000
<input type="radio" name="kalorie" class="kalorie" value="1250" />1250
<input type="radio" name="kalorie" class="kalorie" value="1500" />1500
<input type="radio" name="kalorie" class="kalorie" value="2000" />2000
<input type="radio" name="kalorie" class="kalorie" value="2500" />2500
<br/>
<br/>
<input type="checkbox" class="posilki" value="15" disabled/>Śniadanie
<input type="checkbox" class="posilki" value="10" disabled/>2 Śniadanie
<input type="checkbox" class="posilki" value="20" disabled/>obiad
<input type="checkbox" class="posilki" value="10" disabled/>podwieczorek
<input type="checkbox" class="posilki" value="15" disabled/>kolacja
<br/>Days
<input type='button' value='-' class='qtyminus' field='quantity' disabled/>
<input type='text' name='quantity' value='30' class='qty' id="days-input" disabled/>
<input type='button' value='+' class='qtyplus' field='quantity' disabled/>
<br/>
<br/>Total:
<div id="total">0 zł</div>
</div>
答案 0 :(得分：0)
因为你提到的是一些新的javascript ...我的主要信息是把东西放在函数中。
这迫使你想：“好吧，我到底需要知道什么呢？” ......那些是你职能的参数。
广告当然，功能大大减少了代码，您不必复制/粘贴所有内容6次。
注意：如果需要，可以将所有函数放在document.ready中。
而且，是的，我添加了标签元素。这使得客户更好。
这是吗？<div class="container">
<h2 class="global-title">Cennik</h2>
<input type="radio" name="kalorie" class="kalorie" value="1000" id="r0" /><label for="r0">1000</label>
<input type="radio" name="kalorie" class="kalorie" value="1250" id="r1" /><label for="r1">1250</label>
<input type="radio" name="kalorie" class="kalorie" value="1500" id="r2" /><label for="r2">1500</label>
<input type="radio" name="kalorie" class="kalorie" value="2000" id="r3" /><label for="r3">2000</label>
<input type="radio" name="kalorie" class="kalorie" value="2500" id="r4" /><label for="r4">2500</label>
<br/><br/>
<input type="checkbox" class="posilki" id="sniadanie" value="15" ><label for="sniadanie">Sniadanie</label>
<input type="checkbox" class="posilki" id="sniadanie2" value="10" ><label for="sniadanie2">2 Sniadanie</label>
<input type="checkbox" class="posilki" id="obiad" value="20" ><label for="obiad">obiad</label>
<input type="checkbox" class="posilki" id="podwieczorek" value="10" ><label for="podwieczorek">podwieczorek</label>
<input type="checkbox" class="posilki" id="kolacja" value="15" ><label for="kolacja">kolacja</label>
<br/><br/>Days
<input type="button" value="-" class="qtyminus" field="quantity" >
<input type="text" name="quantity" value="30" class="qty" id="days-input" >
<input type="button" value="+" class="qtyplus" field="quantity" >
<br/>
<br/>Total:
<div id="total">0 zl</div>
</div>
<style>
label {
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// calculates the total price, displays it in id="total"
function calculateTotal(sum_price, days) {
var result = sum_price * days;
$('#total').html(result + ' zl');
return result; // not really being used
}
// reads the checked checkboxes, returns their sum value
function readSumPrice() {
var sum = 0;
$('.posilki').each(function(i) {
if(this.checked) {
sum += Number($(this).val());
}
});
return sum;
}
// what ever the client changes, triggers this function. We don't really care what has just been clicked on, we have to recalculate it anyway.
function somethingChanged() {
// first we want to check if three meals have been chosen
var numberOfMealsChosen = $( ".posilki:checked" ).length;
if(numberOfMealsChosen >= 3) {
// now we calculate
var sum_price = readSumPrice();
var days = Number($('#days-input').val());
calculateTotal(sum_price, days);
}
else {
$('#total').html('please choose 3 items');
}
}
// now the events
$(document).ready(function() {
// click on +
$('.qtyplus').click(function() {
var days = Number($('#days-input').val());
$('#days-input').val(days + 1);
somethingChanged();
});
// click on -
$('.qtyminus').click(function() {
var days = Number($('#days-input').val());
// let's put 0 as minimum
if(days > 0) {
$('#days-input').val(days - 1);
somethingChanged();
}
});
// click on checkbox
$('.posilki').click(function() {
somethingChanged();
});
// click on radio. triggers the calculation but doesn't really affect anything (yet?)
$('.kalorie').click(function() {
somethingChanged();
});
});
</script>