如何使用带有拖放功能的 if 语句根据拖动的对象打开不同的链接？

Question

我正在尝试制作一个网页，您可以在其中将三个图像之一拖放到目标图像上，并且根据拖放到目标上的图像，用户将被定向到不同的链接。例如，当用户将ID为“drag 1”的图像拖到目标图像上时，他们将被定向到我网站上的网页“portfolio-fiber”。或者，如果用户将ID为“drag 2”的图像拖到目标图像上，则被引导到网页“portfolio-paint”；等等。到目前为止，我几乎可以完成所有工作，但是当我拖动任何图像时，它们都会将我引导到同一个网页（“portfolio-fiber”）。我是编码新手，因此，我将非常感谢您提供的有关如何使不同的可拖动图像将用户引导至不同链接的任何建议。以下是我到目前为止的脚本。<script>function allowDrop(ev) {  ev.preventDefault();}function drag(ev) {  ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {  ev.preventDefault();  var data = ev.dataTransfer.getData("text");  ev.target.appendChild(document.getElementById(data));  if (data = "#drag 1"){    window.open('portfolio-fiber', '_self',false).click();  }  else if (data = "#drag 2"){    window.open('portfolio-paint', '_self',false).click();  }else if (data = "#drag 3"){    window.open('portfolio-other', '_self',false).click();  }}</script>

Answer 1

你非常接近，你的第一个问题是你data在你的 if 语句中分配一个变量时只使用一个=，输出总是正确的，这就是为什么它总是去投资组合光纤。其次，在进行比较时drag 1不应该这样做，您可以通过在 if 语句之前放置一个来看到这一点，这将在查看浏览器控制台时向您显示变量中存储的内容。#drag 1console.log(data)

我相信下面的代码块现在应该具有预期的效果。

function drop(ev) {

  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");

  ev.target.appendChild(document.getElementById(data));

  if (data == "drag 1"){

    window.open('portfolio-fiber', '_self',false).click();

  }

  else if (data == "drag 2"){

    window.open('portfolio-paint', '_self',false).click();

  }

else if (data == "drag 3"){

    window.open('portfolio-other', '_self',false).click();

  }

}