2014-02-09 101 views
3

我有五個問題,並且每個問題都隱藏在編號爲1-5的框中,一旦用戶從1 - 5中選擇一個數字,所選框將彈出問題.. 我想知道如何刪除選定框,如果用戶按下右鍵,如果左鍵會做什麼,但彈出一個大X標記..使用箭頭鍵刪除div

<script type="text/javascript"> 
      function Question1(){ 
      document.getElementById('Question').innerHTML = 'Question#1'; 
      } 
      function Question2(){ 
      document.getElementById('Question').innerHTML = 'Question#2'; 
      } 
      function Question3(){ 
      document.getElementById('Question').innerHTML = 'Question#3'; 
      } 
      function Question4(){ 
      document.getElementById('Question').innerHTML = 'Question#4'; 
      } 
      function Question5(){ 
      document.getElementById('Question').innerHTML = 'Question#5'; 
      } 

      function showArrowKey(e) { 
      arrowKey = e.which||e.keyCode; 
      switch(arrowKey) { 
       case 37: //left key 
        //Do nothing just pop up Big X mark 
        break; 
       case 39: //right key 
        // Remove the selected div, and pop up Check mark 
        break; 
      } 
     } 

    </script> 
<div class = "container"> 
     <div id = "CompleteImage"> 
      <div class = "squareInside" id="trigger-overlay1" onclick='Question1()'>1</div> 
      <div class = "squareInside" id="trigger-overlay2" onclick='Question2()'>2</div> 
      <div class = "squareInside2" id="trigger-overlay3"onclick='Question3()'>3</div> 
      <div class = "squareInside2" id="trigger-overlay4"onclick='Question4()'>4</div> 
      <div class = "squareInside2" id="trigger-overlay5"onclick='Question5()'>5</div> 

     </div> 
    </div> <!-- container --> 
    <div class="overlay overlay-door" > 
     <button type="button" class="overlay-close">Close</button> 
     <nav> 
      <ul> 
       <li><p id='Question' ></p></li> 
      </ul> 
     </nav> 
    </div> 

回答

1

使用jQuery,刪除一個元素,在這種情況下一個div,使用:

$('div').remove(); 

然後顯示覆選標記,將其作爲另一個元素pr可靠地低於與CSS的div:display:none; 然後隨着刪除的div,用jQuery再次揭示它

$('checkMark').show();