那些遇到过的问题

图标保持隐藏,直到移动到那里

A.J*_*sma 6 html javascript css jquery if-statement

我试图让图标(将来是按钮)保持隐藏状态,直到右边的单词放在按钮所在的标签中,所以当它完成后你只能点击图标如果你已经设置了正确的选项卡中的正确的单词和一些音频将播放...但我似乎无法弄清楚如何让图标保持隐藏,直到放置单词,如果我查找,有些东西需要保持隐藏,直到按钮是点击了,但我不想要那个..

这是它的外观

在此输入图像描述

这是我的代码 

$(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
});
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<!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>
Run Code Online (Sandbox Code Playgroud)

这是我的小提琴,我希望它没关系,因为它是第二次制作小提琴如果它不对,请,提示随时欢迎!https://jsfiddle.net/82332Lk8/

小智 1

您可以使用 droppable 中的 Accept 选项来完成此操作。

但首先，您需要在 css 文件中将图像的可见性声明为“隐藏”：

.eggImage {
 visibility: hidden; 
}
Run Code Online (Sandbox Code Playgroud)

一旦你使用像“.wordEgg”这样的类使匹配的单词可拖动，那么你可以在 droppable 函数中使用“accept”来指定 droppable 元素接受哪个类，然后使用 css() 来更改图像的可见性：

 $( ".eggImage" ).droppable({
         accept: ".wordEgg",
         drop: function() {
          $(".eggImage").css("visibility","visible")
      });
Run Code Online (Sandbox Code Playgroud)

工作小提琴演示： http://jsfiddle.net/drrrrreams/7q74ophg/

归档时间：

查看次数：

109 次

最近记录：

10 年，2 月 前
相关归档
如何强制浏览器重新加载缓存的CSS/JS文件？ 957
有没有办法将列表分成列？ 114
如何在Javascript中替换正则表达式子字符串匹配？ 103
在Redux中mapToDispatchToProps()的参数时,'dispatch'不是函数 102
如何在onClick处理程序中转义JavaScript代码中的字符串？ 64
重试jquery ajax请求,该请求附加了延迟的回调 37
Jade:更改父模板中的活动菜单项 31
如果那么Mysql触发器那么 12
如果检查有多少条件 5
条件运算符是否比正常运算符更高效？ -1
难疑归档
有一个CSS父选择器吗？ 2986
仅存储使用Git更改的多个文件中的一个文件？ 2895
你如何设置,清除和切换一个位？ 2454
什么是反思,为什么它有用？ 2011
如何在Python中小写一个字符串？ 1908
轻松获取最新的git子模块 1748
退出申请不赞成？ 1131
使用PHP"注意:未定义的变量","注意:未定义的索引"和"通知:未定义的偏移量" 1119
angular-route和angular-ui-router之间有什么区别？ 1064
字段和属性之间有什么区别？ 1032