Question

所以目前我有2个可拖动的图像和两个Div框。您可以将图像拖动到Div框中，并根据放入特定Div的图像，Div的边框颜色会发生变化（绿色或红色）。

我接下来要做的是让一个按钮让我们说＆＃34;下一步＆＃34;当你点击这个按钮时它会带你到另一个页面但是只有当两个DIV框都有绿色边框时，如果没有满足这个标准，那么就会弹出一个警告。听起来很奇怪我知道，但非常感谢帮助:)。

我的代码如下：

HTML：

<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<img src="trash.jpg" ondrop="drop(event)"     ondragover="allowDrop(event)" id="trash" draggable="false"/>

<img id="drag1" class="item1" src="forward.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
<img id="drag2" class="item2" src="left.jpg" draggable="true" ondragstart="drag(event)" width="64" height="64">

<button onclick="checkImages()">Validate images</button>

CSS：

#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}

#Drop1.red-border,
#Drop2.red-border {
  border: 1px solid red;
}

#Drop1.green-border,
#Drop2.green-border {
  border: 1px solid green;
}

#Drop1.gray-border,
#Drop2.gray-border {
  border: 1px solid darkgray;
}

JS：

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
 ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text/html");

    var clone = document.getElementById(data).cloneNode(true);
    clone.id = clone.id + (new Date()).getMilliseconds();
    ev.target.appendChild(clone);

    if (ev.target == document.getElementById("trash")) {
        var img = document.getElementById(data);
        img.parentNode.removeChild(img); 
    }
}

function checkImages() {
  var drop1Elem = document.getElementById('Drop1'),
      drop2Elem = document.getElementById('Drop2');

  if(drop1Elem.childNodes.length >= 1) {
    if(drop1Elem.childNodes[0].className === 'item1') {
      drop1Elem.className = 'red-border';
    } else if(drop1Elem.childNodes[0].className === 'item2') {
      drop1Elem.className = 'green-border';
    } else {
      drop1Elem.className = 'gray-border';
    }
  }

  if(drop2Elem.childNodes.length >= 1) {
    if(drop2Elem.childNodes[0].className === 'item1') {
      drop2Elem.className = 'red-border';
    } else if(drop2Elem.childNodes[0].className === 'item2') {
      drop2Elem.className = 'green-border';
    } else {
      drop2Elem.className = 'gray-border';
    } 
  }
}

Answer 1

根据你的写作，也许是这样的。

HTML：

<button onclick="greenCheck()">Next</button>

JS：

function greenCheck() {
    var drop1Elem = document.getElementById('Drop1'),
    drop2Elem = document.getElementById('Drop2');

    if (drop2Elem.className == 'green-border' && drop1Elem.className == 'green-border') {
    // Next page
    } else {
    // Tell user both of them are not green
}

我假设你checkImages()在这里指定了css类。

检查条件是否为真如果是，则进入下一级别，如果不抛出警报消息

1 个答案: