내 체크 박스에 이미 가격을 계산하는 기능이 있다는 사실에 밟 히기 때문에 실제로 어디서부터 시작 해야할지 모르겠습니다.
기본적으로, 토핑이 선택 될 때마다 (체크 박스) 선택된 토핑 이미지가 이미 페이지에있는 기본 이미지에 나타나도록 피자베이스의 이미지를 동적으로 업데이트해야합니다.
기본 HTML에 다음이 있습니다.
<div class="base">
<img id="pBase" alt= "Pizza " src="img/base.png" />
</div>
내 확인란의 경우 다음과 같습니다.
input type="checkbox" name="topping" value="topping1" onclick="Total()" /> Topping1<br />
<input type="checkbox" name="topping" value="topping2" onclick="Total()" /> Topping2<br />
<input type="checkbox" name="topping" value="topping3" onclick="Total()" /> Topping3<br />
이제 내 함수 Total ()은 각 토핑이 선택되고 작동 중일 때 가격을 동적으로 업데이트하는 것입니다.
그렇다면 토핑 이미지를 선택하여 피자를 동적으로 만드는 다른 함수를 만들려면 어디에서 시작해야합니까? 아니면 여전히 Total () 함수를 사용하고 있습니까? 그렇다면 어떻게 진행합니까?
var top_type = new Array();
top_type["topping1"]=2.00;
top_type["topping2"]=2.00;
top_type["topping3"]=2.00;
function getTopPrice()
{
var TopPrice=0;
var theForm = document.forms["orderform"];
var topOption = theForm.elements["topping"];
for(var i = 0; i < topOption.length; i++)
{
if(topOption[i].checked==true)
{
TopPrice += top_type[topOption[i].value];
}
}
return TopPrice;
바라건대이 질문이 내 머릿속에 있지 않기 때문에 이해가 되길 바랍니다.
정말 간단한 접근 방식 : 시작하려면 토핑에 매핑되는 이미지 배열을 배치합니다. 가격과 유사하게이를 수행 할 수 있습니다.
var top_img = new Array();
top_img["topping1"]="topping1.jpg";
top_img["topping2"]="topping2.jpg";
top_img["topping3"]="topping3.jpg";
가격을 반복하면서 확인 된 항목을 찾으면 이미지를 가져 와서 보여 주면됩니다 (기존 if 문 내부).
이미지를 오버레이하려면 불투명도를 빠르게 읽어야합니다.
케이크 조각! (또는 피자)
두 경우 모두 루프를 사용하지 않도록 리팩토링 할 수도 있지만 작업을 완전히 리팩터링하고 싶지는 않았습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다