The icon remains hidden until something moves there

Question

I try to allow the icons (which will be buttons in the future) to remain hidden until the correct word is placed on the tab in which the button is located, so when all this is done, you can click on the icon, I set the correct word to right tab, and some sounds will play. But I can’t understand how to allow the icon to remain hidden until the word is placed, if I look at it, something needs to be hidden until the button is pressed, but I do not want this ..

Here is what it looks like

This is my code.

$(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> 

This is my violin, I hope that everything is in order, as this is the second time, doing the violin if it is not, please, tips are always welcome! https://jsfiddle.net/82332Lk8/

Answer 1

you could do this with the accept option inside droppable.

But first you need to declare the visibility of the image as “hidden” in your css file:

 .eggImage { visibility: hidden; } 

once you make the corresponding word draggable with a class like .wordEgg, then you can use "accept" in your droppable function to indicate which class accepts the droppable element, then use css () to change the visibility of the image

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

demonstration of working scripts: http://jsfiddle.net/drrrreams/7q74ophg/