Question

我试图对记忆游戏进行模拟，但我不知道为什么应用程序不显示卡片形式。如果你能找到一对，它必须保持显示在屏幕上。这就是我做的。有没有人有想法？

<html>
<head>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <script>
  var BoxOpened = "";
  var ImgOpened = "";
  var ImgFound = 0;

  var Source = "#boxcard";

  var ImgSource = [
    "http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png",
    "http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png",
    "http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png",
  ];


  function OpenCard() {
    var id = $(this).attr("id");

    if ($("#" + id + " img").is(":hidden")) {
        $(Source + " div").unbind("click", OpenCard);

        $("#" + id + " img").slideDown('fast');

        if (ImgOpened == "") {
            BoxOpened = id;
            ImgOpened = $("#" + id + " img").attr("src");
            setTimeout(function() {
                $(Source + " div").bind("click", OpenCard)
            }, 300);
        } else {
            CurrentOpened = $("#" + id + " img").attr("src");
            if (ImgOpened != CurrentOpened) {
                setTimeout(function() {
                    $("#" + id + " img").slideUp('fast');
                    $("#" + BoxOpened + " img").slideUp('fast');
                    BoxOpened = "";
                    ImgOpened = "";
                }, 400);
            } else {
                $("#" + id + " img").parent().css("visibility", "hidden");
                $("#" + BoxOpened + " img").parent().css("visibility", "hidden");
                ImgFound++;
                BoxOpened = "";
                ImgOpened = "";
            }
            setTimeout(function() {
                $(Source + " div").bind("click", OpenCard)
            }, 100);
      //  window.console && console.log('');
        }
        Counter++;
        $("#counter").html("" + Counter);

        if (ImgFound == ImgSource.length) {
            $("#counter").prepend('<span id="success">You Found All Pictues With </span>');
        }
    }
  }

  $(function() {

  for (var y = 1; y < 3 ; y++) {
    $.each(ImgSource, function(i, val) {
        $(Source).append("<div id=card" + y + i + "><img src=" + val + " />");
    });
  }
    $(Source + " div").click(OpenCard);
  });

  </script>
  <div id="picbox">
    <div id="boxcard"></div>
  </div>
<style>

body {
    font: 18px Verdana;
    color: #FFF;
  background: #CCC;
}
#picbox {
    margin: 0px auto;
    width: 640px;
}
#boxcard {
    z-index: 1;
    margin: 10px 0 0;
}
#boxcard div{
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
  background: #B1B1B1;
    z-index: 2;
}
#boxcard div img {
    display: none;
    border-radius: 10px;
    z-index: 3;
}
</style>
</body>
</html>

Answer 1

Give this jsFiddle a look

    //$("#" + id + " img").parent().css("visibility", "hidden");
    //$("#" + BoxOpened + " img").parent().css("visibility", "hidden");

jquery记忆游戏和HTML

1 个答案: