Question

是否可以跟踪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;
}

但是在生成图像之前是否可以检查2次点击？一键即可用于橱柜，例如白色橱柜，然后另一个用于工作台，例如黑色台面，然后用白色橱柜和黑色台面拉出图像？

Answer 1

您需要做的是存储点击的结果，然后仅在完成两次点击后转到图像。

重点是：

创建几个变量来存储选择
为图像指定不同的类以将它们与A和B部分相关联
修改点击事件以记录适当的选择
并在点击事件中推测性地检查其他选择是否有已经成为

当我们在选择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.
    ...
    }
}

跟踪两次点击然后生成图像

1 个答案: