Это продолжение вопроса, который я задал вчера.
У меня есть упрощенная корзина для покупок, которую я создаю, которая требует в сумме трех разных переключателей служб.
С помощью хороших людей из Stackoverflow я получил ценность трех суммируются и отображаются переключатели. Третий переключатель включает выпадающий переключатель, который умножает его значение.
Однако сейчас я пытаюсь умножить значение ползунка длины песни на значение этого третьего переключателя. т.е.
Цена # reampSwitch3 = (значение # reampSwitch3) x (значение #inlineFormCustomSelectPref) x (значение # slider1)
Затем reampSubtotal = # reampSwitch1 + # reampSwitch2 + # reampSwitch3.
Вот css для слайдера пользовательского интерфейса J Query:
<style>
/* slider css */
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
Вот все html элементы:
<p>Song Length (mins)</p>
<div id="slider1">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input reampingSwitch" id="reampSwitch1" value="20">
<label class="custom-control-label" for="reampSwitch1">Live Reamping Deposit</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input reampingSwitch" id="reampSwitch2" value="30">
<label class="custom-control-label" for="reampSwitch2">Another Service</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="reampSwitch3">
<label class="custom-control-label" for="reampSwitch3" value="10">Amp simulator matching</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected value="0">How Many Tracks?</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<div class="total" id="reampTotal">
<div class="alert alert-info" role="alert" id="reampSubtotal">
Reamping Total : £0
</div>
</div>
и различные скрипты :
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
// Slider jquery
$( function() {
var handle = $( "#custom-handle" );
$( "#slider1" ).slider({
value:3.00,
min: 0,
max: 5.00,
step: 0.5,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle.text( ui.value );
}
});
} );
</script>
<script type="text/javascript">
//subtotal
$(".reampingSwitch").click(function() {
let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
if($(this).is(":checked")){
total += parseInt($(this).attr("value"));
}
else if(!$(this).is(":checked")) {
total -= parseInt($(this).attr("value"));
};
$("#reampSubtotal").html("Reamping Total : £" + (total));
});
$("#inlineFormCustomSelectPref").change(function() {
if ($("#reampSwitch3").prop("checked") == true) {
let selected = $(this).val();
let price = selected * $("label[for='reampSwitch3']").attr("value");
let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
if($(this).attr("data-selected")){
let previous = $(this).attr("data-selected");
let previousPrice = previous * $("label[for='reampSwitch3']").attr("value");
total -= previousPrice;
}
total += price;
$("#reampSubtotal").html("Reamping Total : £" + (total));
$(this).attr("data-selected", selected);
}
});
$("#reampSwitch3").click(function() {
if ($("#inlineFormCustomSelectPref").val() > 0 && $(this).prop("checked") == true) {
let selected = $("#inlineFormCustomSelectPref").val();
let price = selected * $("label[for='reampSwitch3']").attr("value");
let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
total += price;
$("#reampSubtotal").html("Reamping Total : £" + (total));
}
else if ($("#inlineFormCustomSelectPref").val() > 0 && $(this).prop("checked") == false) {
let selected = $("#inlineFormCustomSelectPref").val();
let price = selected * $("label[for='reampSwitch3']").attr("value");
let total = parseInt($("#reampSubtotal").text().replace("Reamping Total : £", ""));
total -= price;
$("#reampSubtotal").html("Reamping Total : £" + (total));
}
});
</script>
Здесь вы можете увидеть живую версию: http://www.recordingdoctor.com/roughslider.html
где сейчас
Цена # reampSwitch3 = (значение # reampSwitch3) x (значение #inlineFormCustomSelectPref)
reampSubtotal = # reampSwitch1 + # reampSwitch2 + # reampSwitch3
т.е. в настоящее время ползунок ничего не делает