>

입력 할 값이 많은 매우 상세한 양식이며 결과는 가격입니다. 주 2 선택 상자에 따라 가격을 얻는 기능이 제대로 작동합니다. 체크 박스 변경시 업데이트되는 변수 "가격"을 제공합니다&선택 상자 변경, 문제는 일부 확인란이 총 가격의 40 %를 추가하는 것과 같이 최종 가격에 영향을 미친다는 것입니다. 변경 사항은 가격에 영향을 미치는 1 개의 확인란으로 완벽하게 작동하지만 가격에 영향을 미치는 다른 입력을 추가하면 계산에 포함되지 않습니다 이전 입력.

첫 번째 확인란을 선택하고 첫 번째 라디오를 선택한 경우와 같이 많은 조건을 시도했습니다 : .. 그렇지 않으면 첫 번째 확인란을 선택하고 두 번째 라디오를 선택한 경우 : .. 복잡해 보이지만 j 쿼리 또는 JavaScript를 사용하여 더 쉬운 방법이 있기를 바랍니다

function getPrice() {
//let's assume the price is 80
price = 80;
//order duo is supposed to add 20% of total price
if ($('#order_duo').is(':checked')) {
 document.getElementById("price").textContent=price + price*0.2;
 document.getElementById("price_input").value = price +  price*0.2;
}   
else {
    document.getElementById("price").textContent=price;
    document.getElementById("price_input").value = price;
}
//if prefered lane is support add 50% of total price
$('#prefered_lane').on('change', function() {
    prefered_lane = this.value;
    if (prefered_lane === "Support") {
      getPrice();
      price =   parseInt(document.getElementById("price_input").value);
    document.getElementById("price").textContent=price + price*0.5;
    document.getElementById("price_input").value = price +  price*0.5;
  }else{
    getPrice();
    price = document.getElementById("price_input").value;
     document.getElementById("price").textContent=price;
    document.getElementById("price_input").value = price;
  }
}); 
}
$('#prefered_lane').on('change', function() {
  getPrice();
  });
$('#order_duo').click(
    function () {
     if ($('#order_duo').is(':checked')) {
   getPrice();
}   
else {
    getPrice();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
        <input type="text" name="price_input" id="price_input" value="" hidden="">
<input type="checkbox" value="true" name="order_duo" class="form-check-input" id="order_duo"  style="width: 20px;height: 20px;">
<select id="prefered_lane" name="prefered_lane" class="form-control" style="text-align-last: center;"  autocomplete="off">
  <option value="Top Lane">Top Lane</option>
  <option value="Jungle">Jungle</option>
  <option value="Mid Lane">Mid Lane</option>
  <option value="AD Carry">AD Carry</option>
  <option value="Support">Support (+50%)</option>
</select>  
<div class="first">Buy Now</div>
<div class="second">For € <strong id="price"></strong></div>
                    
</form>

지원 가격 재설정을 선택하면서 듀오를 선택 취소하면 80으로 재설정 :/

  • 답변 # 1

    getPrice 의 각 계산에서 가격을 재설정합니다  기능이지만 lane 를 모두 고려하지는 않습니다.  그리고 duo  조건, 오직 duo .

    와이즈 비즈  가격 계산 중에는 함수 내부의 블록이 실행되지 않습니다. 그것이하는 일은 $('#prefered_lane').on()new이벤트 핸들러를 추가하는 것입니다.  요소이므로 select 를 선택 취소하면 가격은 원래 80으로 돌아갑니다.

    이 점을 염두에두고 코드를 정리할 수 있습니다.

    duo
    
    

    // Do calculations whenever any element changes
    $('#order_duo, #prefered_lane').change(function() {
      //let's assume the price is 80
      let price = 80;
      //order duo is supposed to add 20% of total price
      if ($('#order_duo').is(':checked')) {
        price = price * 1.2;
      }
      //if prefered lane is support add 50% of total price
      if ($('#prefered_lane').val() === "Support") {
        price = price * 1.5;
      }
      $('#price').text(price);
      $('#price_input').val(price);
    });
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" name="price_input" id="price_input" value="" hidden=""> <input type="checkbox" value="true" name="order_duo" class="form-check-input" id="order_duo" style="width: 20px;height: 20px;"> <select id="prefered_lane" name="prefered_lane" class="form-control" style="text-align-last: center;" autocomplete="off"> <option value="Top Lane">Top Lane</option> <option value="Jungle">Jungle</option> <option value="Mid Lane">Mid Lane</option> <option value="AD Carry">AD Carry</option> <option value="Support">Support (+50%)</option> </select> <div class="first">Buy Now</div> <div class="second">For € <strong id="price"></strong></div> </form>

관련 자료

  • 이전 windows - 네트워크 공유에서 파일을 잠그는 사람 찾기
  • 다음 파이썬의 알고리즘 (숫자)