2 개의 클릭을 추적 한 다음이를 기반으로 이미지를 생성 할 수 있습니까?
예를 들면 다음과 같습니다. 여기에 하나의 이미지를 선택하고 그에 따라 이미지를 제공하는 방법이 있습니다.
var images = document.querySelectorAll('.img');
for (var i = images.length; i--;) images[i].addEventListener('click', change);
function change() {
switch (this.value) {
case "colour1":
image = '<img src="http://smallbeerpress.com/wp-content/uploads/itunes.png"></img>';
break;
case "colour2":
image = '<img src="http://fc01.deviantart.net/fs29/f/2009/238/d/8/Small_50x50__png_clock_pic_by_counter_countdown_ip.png"></img>';
break;
case "colour3":
image = '<img src="http://a.deviantart.net/avatars/r/a/rachelsrandomart.gif?12"></img>';
break;
default:
image = '<img src="#!"></img>';
}
document.getElementById("output-image").innerHTML = image;
}
그러나 이미지를 생성하기 전에 두 번의 클릭을 확인할 수 있습니까? 한 번의 클릭은 찬장 (예 : 흰색 찬장)을위한 것이고 다른 하나는 작업대 (예 : 검은 색 작업대)를위한 것입니다. 그런 다음 이것을 가져 와서 흰색 찬장과 검은 색 작업대로 이미지를 당깁니다.
당신이해야 할 일은 클릭의 결과를 저장하고 두 클릭이 모두 완료되었을 때만 이미지로 이동하는 것입니다.
중요한 점은 다음과 같습니다.
선택 A와 B 모두에 값이있을 때만 이미지 로직 스위치로 진행합니다.
// add variables to store selections
var selectionA = ""
var selectionB = ""
// change classes on the images to separate them
var imagesA = document.querySelectorAll('.imgTypeA');
var imagesB = document.querySelectorAll('.imgTypeB');
for (var i = imagesA.length; i--;) imagesA[i].addEventListener('click', changeA);
for (var i = imagesB.length; i--;) imagesB[i].addEventListener('click', changeB);
function changeA() {
selectionA = (this.value)
checkBoth()
}
function changeB() {
selectionB = (this.value)
checkBoth()
}
function checkBoth() {
if (selectionA.length > 0 && selectionB.length > 0) {
...
//logic for image selection using SelectionA & B values.
...
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다