rimane nascosta finché qualcosa non viene spostato lì

Question

Sto tentando di lasciare nascoste le icone (che saranno pulsanti in futuro) finché non viene inserita la parola corretta nella scheda in cui si trova il pulsante, quindi quando è tutto fatto puoi solo fare clic sull'icona se hai impostato la parola giusta nella scheda destra e alcuni suoni verranno riprodotti .. ma non riesco a capire come lasciare che l'icona rimanga nascosta finché non viene posizionata la parola, se la guardo up, qualcosa deve rimanere nascosto fino a quando il pulsante viene premuto, ma non voglio che ..

Questo è come appare

Questo è il mio codice

$(document).ready(function() { 
 
    var rigtige = 0; //good_points 
 
    var forkerte = 0; //false_points 
 
    var answers; 
 
    var footer; 
 
    var timer = setInterval(function() { 
 
    getReady(); 
 
    }, 203); 
 
    var number = [0, 1, 2, 3, 4, 5, 6, 7]; 
 

 

 
    //define JSON arrays (jsonData_0_123.json) 
 
    function getReady() { 
 
     if (jsonData !== "noJson") { 
 
     clearInterval(timer); 
 
     answers = jsonData.answers; 
 
     footer = jsonData.footer; 
 
     makeWordList(); 
 
     dragDrop(); 
 
     } 
 
    } 
 
    //end 
 

 

 
    function makeWordList() { 
 
     shuffle(number); 
 
     var text_time; 
 
     for (var j = 0; j < answers.length; j++) { 
 
     var i = j + 1; 
 
     //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div> 
 
     document.getElementById("word" + number[j]).innerHTML = '<div class="tekst draggable" id="tekst' + i + '"> <span>' + answers[j] + '</span></div>' 
 

 

 
     } 
 
    } 
 
    // //makeWordList 
 
    //  function makeWordList() { 
 
    //   shuffle(number); 
 
    //   for (var i = 0; i < answers.length; i++) { 
 
    //   //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div> 
 
    //   var j = i + 1; 
 
    //   var str = '<div class="tekst draggable" id="tekst'+ j +'"> <p>'+ answers[i] +'</p> </div>'; 
 
    //   document.getElementById('word' + number[i]).innerHTML = str; 
 
    //   } 
 
    //  }; 
 
    // 
 
    // //end 
 

 
    //shuffle 
 
    function shuffle(array) { 
 
     var currentIndex = array.length, 
 
     temporaryValue, randomIndex; 
 

 
     while (0 !== currentIndex) { 
 

 
     randomIndex = Math.floor(Math.random() * currentIndex); 
 
     currentIndex -= 1; 
 

 
     temporaryValue = array[currentIndex]; 
 
     array[currentIndex] = array[randomIndex]; 
 
     array[randomIndex] = temporaryValue; 
 
     } 
 

 
     return array; 
 
    } 
 
    //end 
 

 
    //make dragdroppable 
 
    function dragDrop() { 
 
     //Make the revert event for draggable 
 
     $.ui.draggable.prototype._mouseStop = function(event) { 
 
      //If we are using droppables, inform the manager about the drop 
 
      var dropped = false; 
 
      if ($.ui.ddmanager && !this.options.dropBehaviour) 
 
      dropped = $.ui.ddmanager.drop(this, event); 
 

 
      //if a drop comes from outside (a sortable) 
 
      if (this.dropped) { 
 
      dropped = this.dropped; 
 
      this.dropped = false; 
 
      } 
 

 
      if ((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) { 
 
      var self = this; 
 
      self._trigger("reverting", event); 
 
      $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() { 
 
       event.reverted = true; 
 
       self._trigger("stop", event); 
 
       self._clear(); 
 
      }); 
 
      } else { 
 
      this._trigger("stop", event); 
 
      this._clear(); 
 
      } 
 

 
      return false; 
 
     } 
 
     //end 
 

 
     //Make tekst draggable 
 
     $(".draggable").draggable({ 
 
     opacity: 1, 
 
     containment: 'body', 
 
     revert: true, 
 
     scroll: false, 
 
     reverting: function() { 
 
      console.log('reverted'); 
 
      //play('false'); 
 
      forkerte++; 
 
      document.getElementById("forkerte").innerHTML = '<span id="forkerte">' + forkerte + '</span>'; 
 
     }, 
 
     }); 
 
     //end 
 

 
     var id = 1; 
 
     var text = ""; 
 
     var text2 = ""; 
 
     while (id < 9) { // lengte van je array + 1 
 
     text = "antwoord" + id; //id= antwoord1 antwoord2 enz daarom antwoord + id zo dat het er 8 keer komt 
 
     text2 = "tekst" + id; 
 

 
     $("#" + text).droppable({ // dan wordt het dus allemaal droppable id antwoord 1 tm 8 
 
      tolerance: "pointer", 
 
      accept: "#" + text2, // Welke id er op moet vallen je maakt antwoord1a(tekst) bv droppable voor antwoord1(antwoord div) 
 
      drop: function(event, ui) { 
 
      // play('true'); 
 
      $(ui.draggable).draggable({ 
 
       revert: false 
 
      }); // Only draggable in div antwoord 
 
      $(ui.draggable).draggable('disable'); //disable draggable 
 
      ui.draggable.position({ 
 
       of: $(this), 
 
       my: 'center left', 
 
       at: 'center center' 
 
      }); 
 
      $(this).droppable('disable'); 
 
      rigtige++; //+1 bij de punten van goed 
 
      document.getElementById("rigtige").innerHTML = '<span id="rigtige">' + rigtige + '</span>'; //update de html 
 
      //checckScore(); 
 
      } 
 
     }); 
 
     id++; //BELANKRIJK zonder id++ endles loop 
 
     } 
 

 
    } 
 
    //end 
 

 
    //spinning reset button 
 
    $(".spin").mouseenter(function() { 
 
    $(".fa-refresh").addClass("fa-spin"); 
 
    }); 
 

 
    $(".spin").mouseleave(function() { 
 
    $(".fa-refresh").removeClass("fa-spin"); 
 
    }); 
 
    // end 
 
});

body, 
 
html { 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    padding: 0px; 
 
    height: 100%; 
 
    font-family: georgia, "Comic Sans MS"; 
 
    background-color: #f0f0f0; 
 
} 
 
.container { 
 
    height: 90%; 
 
    border-collapse: collapse; 
 
    display: table; 
 
} 
 
.igen { 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
} 
 
.points { 
 
    float: right; 
 
} 
 
.container { 
 
    height: 90%; 
 
    border-collapse: collapse; 
 
    display: table; 
 
} 
 
header { 
 
    height: 5%; 
 
    border-bottom: thick solid grey; 
 
} 
 
.img { 
 
    width: 25%; 
 
    height: 30%; 
 
    background-color: #f0f0f0; 
 
    float: left; 
 
} 
 
.center { 
 
    margin-left: 25%; 
 
    margin-right: 25%; 
 
} 
 
.antwoord { 
 
    float: left; 
 
    width: 95%; 
 
    height: 25px; 
 
    background-color: white; 
 
    border-style: solid; 
 
    border-color: #000000; 
 
    border-width: 4px; 
 
} 
 
.move2 { 
 
    margin-top: 12.5% 
 
} 
 
.move4 { 
 
    margin-top: 19% 
 
} 
 
.move5 { 
 
    margin-top: 33.5% 
 
} 
 
.move6 { 
 
    margin-top: 20.8% 
 
} 
 
.move7 { 
 
    margin-top: 37.5% 
 
} 
 
.border { 
 
    margin-top: 45%; 
 
    border-top: thick solid grey; 
 
    background-color: red; 
 
} 
 
.word, 
 
.word .tekst, 
 
.word p { 
 
    display: inline; 
 
    margin-left: 7%; 
 
    font-weight: bold; 
 
} 
 
.my-row { 
 
    clear: both; 
 
} 
 
.answers .word, 
 
.answers .word2 { 
 
    float: left; 
 
    padding: 3px; 
 
    margin-left: 7%; 
 
    font-weight: bold; 
 
} 
 
.fa { 
 
    margin-left: 5px; 
 
    margin-top: 2px; 
 
} 
 
.word, 
 
.word2 { 
 
    padding-top: 5%; 
 
    margin: 5%; 
 
} 
 
footer { 
 
    border-top: thick solid grey; 
 
    height: 5%; 
 
    display: table-row; 
 
    vertical-align: bottom; 
 
} 
 
.sprint { 
 
    float: right; 
 
} 
 
.copyright { 
 
    position: relative; 
 
    bottom: 20px; 
 
    left: 65px; 
 
    font-size: 10px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
    color: black; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Words</title> 
 

 
    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8"> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <a href=""><span class="fa fa-refresh spin" style="font-size:25px;"></span><span class="igen spin">&nbsp;igen</span></a> 
 
    <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: &nbsp;&nbsp;&nbsp; <span id="rigtige">0</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp; 
 
    <span id="forkerte">0</span> 
 
    </span> 
 
    </header> 
 

 
    <div class="container"> 
 

 
    <div class="img" id="img1"> 
 
     <div class="plaatje" id="plaatje1"> 
 
     <img class="center" src="img/cat.jpg" alt="cat" width="50%;"> 
 
     </div> 
 
     <div class="move1"> 
 
     <div class="antwoord droppable" id="antwoord1"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img2"> 
 
     <div class="plaatje" id="plaatje1"> 
 
     <img class="center" src="img/beak.jpg" alt="beak" width="50%;"> 
 
     </div> 
 
     <div class="move2"> 
 
     <div class="antwoord" id="antwoord2"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img3"> 
 
     <div class="plaatje" id="plaatje3"> 
 
     <img class="center" src="img/spoon.jpg" alt="spoon" width="50%;"> 
 
     </div> 
 
     <div class="move3"> 
 
     <div class="antwoord" id="antwoord3"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img4"> 
 
     <div class="plaatje" id="plaatje4"> 
 
     <img class="center" src="img/milk.jpg" alt="milk" width="50%;"> 
 
     </div> 
 
     <div class="move4"> 
 
     <div class="antwoord" id="antwoord4"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img5"> 
 
     <div class="plaatje" id="plaatje5"> 
 
     <img class="center" src="img/egg.jpg" alt="egg" width="50%;"> 
 
     </div> 
 
     <div class="move5"> 
 
     <div class="antwoord" id="antwoord5"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img6"> 
 
     <div class="plaatje" id="plaatje6"> 
 
     <img class="center" src="img/thee.jpg" alt="tea" width="50%;"> 
 
     </div> 
 
     <div class="move6"> 
 
     <div class="antwoord" id="antwoord6"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img7"> 
 
     <div class="plaatje" id="plaatje7"> 
 
     <img class="center" src="img/meel.jpg" alt="flour" width="50%;"> 
 
     </div> 
 
     <div class="move7"> 
 
     <div class="antwoord" id="antwoord7"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="img" id="img8"> 
 
     <div class="plaatje" id="plaatje8"> 
 
     <img class="center" src="img/passport.jpg" alt="passport" width="50%;"> 
 
     </div> 
 
     <div class="move8"> 
 
     <div class="antwoord" id="antwoord8"><i class="fa fa-play" style="font-size:20px"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="answers"> 
 
     <div class="my-row border"> 
 
     <div class="word" id="word0"></div> 
 
     <div class="word" id="word1"></div> 
 
     <div class="word" id="word2"></div> 
 
     <div class="word" id="word3"></div> 
 
     </div> 
 
     <div class="my-row"> 
 
     <div class="word2" id="word4"></div> 
 
     <div class="word2" id="word5"></div> 
 
     <div class="word2" id="word6"></div> 
 
     <div class="word2" id="word7"></div> 
 
     </div> 
 
    </div> 
 

 
    <footer> 
 
     <img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" /> 
 
     <img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" /> 
 
     <center><span class="copyright"> &copy;2013 laerdansk/FC-Sprint&sup2; Leerbedrijf bronnen </span> 
 
     </center> 
 
    </footer> 
 

 
    <script type="text/javascript"> 
 
     var jsonData = "noJson"; 
 
     var hr = new XMLHttpRequest(); 
 

 
     hr.open("GET", "json_files/jsonData_0_123.json", true); 
 
     hr.setRequestHeader("Content-type", "application/json", true); 
 
     hr.onreadystatechange = function() { 
 
     if (hr.readyState == 4 && hr.status == 200) { 
 
      jsonData = JSON.parse(hr.responseText).main_object; 
 
     } 
 
     } 
 
     hr.send(null); 
 
    </script> 
 

 
    <script src="javascript.js"></script> 
 
</body> 
 

 
</html>

questo è il mio violino spero che va bene dal momento che è la seconda volta facendo un violino se non è giusto, per favore, suggerimenti sono sempre i benvenuti! https://jsfiddle.net/82332Lk8/

Answer 1

si sarebbe in grado di farlo con l'opzione di accettazione entro droppable.

Ma in primo luogo, è necessario dichiarare la visibilità dell'immagine come "nascosto" nel file css:

.eggImage { 
visibility: hidden; 
} 

volta che si effettua la parola corrispondente trascinabile con una classe come '.wordEgg' allora si potrebbe utilizzare ' accettare' nella funzione droppable per specificare quale classe l'elemento droppable accetta, quindi usare i CSS() per modificare la visibilità dell'immagine:

$(".eggImage").droppable({ 
     accept: ".wordEgg", 
     drop: function() { 
      $(".eggImage").css("visibility","visible") 
     }); 

lavoro demo violino:http://jsfiddle.net/drrrreams/7q74ophg/