Question

我需要有关如何显示我想隐藏的div的帮助。这个想法是当对象被拖动到droppable时，它将触发存储在div“包装器”上的测验。我可以隐藏div但是如何在dragItem_ts（）时显示它已经完成了。请帮忙。

dragItem_ts();
dragItem2();

function dragItem_ts() {
  $(function() {
    $("#draggable_ts, #draggable-nonvalid").draggable();
    $("#droppable").droppable({
      accept: "#draggable_ts",

      drop: function(event, ui) {
        $(this)
          .addClass("ui-state-highlight")
          .find("p")
          .html("Correct!")
          .alert("I am an alert box!");
      }
    });
  });
}

function dragItem2() {
  $(function() {
    $("#draggable2, #draggable-nonvalid").draggable();
    $("#droppable2").droppable({
      accept: "#draggable2",

      drop: function(event, ui) {
        $(this)
          .addClass("ui-state-highlight")
          .find("p")
          .html("Correct!");
      }
    });
  });
}

function tabulateAnswers() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;

  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i = 0; i < choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 1;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 1;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 1;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.
  var maxscore = Math.max(c1score, c2score, c3score, c4score);

  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer');
  if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct"
  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is stvsp@am.sony.com"
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is stvsp@am.sony.com"
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is stvsp@am.sony.com"
  }
  // If you add more choices, you must add another response below.
}

// program the reset button
function resetAnswer() {
  var answerbox = document.getElementById('answer');
  answerbox.innerHTML = "Your result will show up here!";
}

#droppable,
#droppable2 {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

#draggable_ts,
#draggable2,
#draggable-nonvalid {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

body {
  font-family: sans-serif;
  background: green;
}

h2 {
  margin: 5px 0;
}

#wrapper {
  width: 600px;
  margin: 0 auto;
  background: white;
  padding: 10px 15px;
  border-radius: 10px;
}

input {
  margin: 5px 10px;
}

button {
  font-size: 18px;
  padding: 10px;
  margin: 20px 0;
  color: white;
  border: 0;
  border-radius: 10px;
  border-bottom: 3px solid #333;
}

#submit {
  background: green;
}

#reset {
  background: red;
}

#answer {
  border: 1px dashed #ccc;
  background: #eee;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Accept</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">


  <script src=javascript/functions.js>
  </script>

</head>


<body>

  <div id="draggable-nonvalid" class="ui-widget-content">
    <p>I'm draggable but can't be dropped</p>
  </div>

  <div id="draggable_ts" class="ui-widget-content">
    <img src="images/ts_image02.jpg">
  </div>


  <div id="draggable2" class="ui-widget-content">
    <p>Drag me to my target</p>
  </div>

  <div id="droppable" class="ui-widget-header">
    <p>accept: '#draggable'</p>
  </div>

  <div id="droppable2" class="ui-widget-header">
    <p>accept: '#draggable2'</p>
  </div>


  <div id="droppable3" class="ui-widget-header">
    <p>accept: '#draggable2'</p>
  </div>

  <div id="wrapper">
    <h1>What is the email address that the customer should send them to?</h1>
    <form id="quiz">
      <!-- Question 1 -->
      <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
      <!-- The value is which answer the choice corresponds to. -->
      <label><input type="radio" name="q1" value="c1">
      stvsp@am
    </label><br />
      <label><input type="radio" name="q1" value="c2">
      svtsp@am
    </label><br />
      <label><input type="radio" name="q1" value="c3">
      mydocs@am
    </label><br />
      <label><input type="radio" name="q1" value="c4">
      docs@am
    </label><br />
      <button type="submit" id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
      <button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
    </form>


    <div id="answer">Your result will show up here!</div>
  </div>

</body>

</html>

Answer 1

在你的div的css类中你需要设置：

display : none;

dragItem_ts();完成时。只需在下面调用此函数：

var e = document.getElementsByClassName("your_div")[0];
e.style.display="block";

激活一个函数后显示div

1 个答案: