Учет значения трех разных селекторов для получения общей суммы покупок - PullRequest
0 голосов
/ 06 мая 2020

Это продолжение вопроса, который я задал вчера.

У меня есть упрощенная корзина для покупок, которую я создаю, которая требует в сумме трех разных переключателей служб.

С помощью хороших людей из 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

т.е. в настоящее время ползунок ничего не делает

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...