홈>
입력 할 값이 많은 매우 상세한 양식이며 결과는 가격입니다. 주 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
관련 자료
- python - 열의 고유 값 수에 대해 계산 된 새 변수
- android - 실시간 데이터베이스에서 키 값을 업데이트하려면 어떻게해야합니까?
- python - 대신 사전 업데이트가 원래 값을 대체합니다
- mysql - 외래 키로 프로덕션 테이블의 값을 업데이트하는 방법은 무엇입니까?
- excel - 조회 값에 따라 최대 값 찾기
- python - DataFrame 열의 값을 반복하고 조건이 충족되면 해당 값을 업데이트합니다
- algorithm - Nest 함수 업데이트 전역 변수 Javascript
- ASPNET Core의 TagHelper는 값을 업데이트하지 않습니다
- sql server - case 문을 사용하여 값에 따라 동적 SQL 업데이트를 구성하는 방법
- python - 인덱스와 열이 일치하지 않을 때 다른 데이터 프레임의 값으로 데이터 프레임을 업데이트하는 방법
- Python - 파이썬 - 3 분의 1에 따라 두 변수의 합이있는 행렬
- c - gdb는 rand ()로 설정된 변수를보고 긴 값을 인쇄합니다
- c# - 변수 값이 업데이트되지 않습니다
- python - 데이터 프레임에서 중첩 된 사전 값 업데이트
- linux - Bash의 속성 파일에서 지역 변수와 변수의 조합으로 변수에 여러 값 할당
- r - 다른 변수의 특정 값에 대한 한 변수의 범위 찾기
- r - 다른 열에 따라 값이있는 새 열 추가
- javascript - JSON 데이터로 업데이트 상태 변수 반응
- python - 다른 변수 값의 범위에 따라 새 변수 정의
- 문자열 내부에 변수가있는 PHP 준비 MySQL UPDATE 문
관련 질문
- javascript : 중첩 Ajax 호출 문제
- javascript : jquery는 div를 제거하고 애니메이션으로 다음 항목을 다시 정렬합니다.
- javascript : jquery로 움직이는 이미지 회전하기
- 내 함수가 완료되면 JavaScript(또는 jQuery)로 사용자 정의 이벤트를 시작합니다.
- javascript : URL에서 페이지로 이미지를 가져오는 방법
- javascript : 여러 위치에서 호출할 수 있도록 아래 jQuery code를 함수에 작성하는 방법은 무엇입니까?
- c# : JavaScript에서 경로 매개변수를 얻는 방법은 무엇입니까?
- javascript : 문서 내부 경고가 준비된 후에만 작동하는 트리거
- javascript : alert() 함수의 소스 code
- javascript : JQuery 및 CSS를 사용한 양식 유효성 검사
getPrice
의 각 계산에서 가격을 재설정합니다 기능이지만lane
를 모두 고려하지는 않습니다. 그리고duo
조건, 오직duo
.와이즈 비즈 가격 계산 중에는 함수 내부의 블록이 실행되지 않습니다. 그것이하는 일은
$('#prefered_lane').on()
에new이벤트 핸들러를 추가하는 것입니다. 요소이므로select
를 선택 취소하면 가격은 원래 80으로 돌아갑니다.이 점을 염두에두고 코드를 정리할 수 있습니다.
<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>