Question

所以我想创建一个简单游戏的概念，其中将imgs加载到屏幕上并为每个游戏提醒弹出窗口，有点像找对象游戏。我已完成该部分，但我想创建一个条件语句的实例，检查是否单击了图像。

当点击了所有元素后，我打算加入一个弹出窗口，说明用户点击了页面上的所有内容？请帮助！

 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

这样的事情应该让你开始：

＆＃13;

//$('body').css('background','blue');
var arrBoxes = [];
var ttl = $('.mybox').length;
$('.mybox').click(function(){
   var bx = this.id;
   if (arrBoxes.indexOf(bx) >= 0){
     alert('already clicked');
   }else{
     arrBoxes.push(bx);
   }
   if (arrBoxes.length == ttl) alert('all done');
});

＆＃13;

.mybox{float:left;width:150px;height:150px;margin:10px;}
.modal-body{overflow:auto;} /* Fixes float:left */
#b1{background:palegreen;}
#b2{background:wheat;}
#b3{background:pink;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
         <div id="b1" class="mybox">Box One</div>
         <div id="b2" class="mybox">Box Two</div>
         <div id="b3" class="mybox">Box Three</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用这三种样本布局中的任何一种。它们按受欢迎程度排列，最受欢迎。但是，它们都运行得很好：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta tags go here>
        <link rel="stylesheet" type="text/css" href="css/mystyle.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/mycode.js"></script>
    </head>
    <body>
        <!-- HTML CODE IN HERE -->
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta tags go here>
        <style>
            /*  Style code in here */
        </style>
        <script type="text/javascript" src="https://CDN/jquery.js"></script>
        <script>
            $(document).ready(function(){
                /*  jQuery code in here */
            }); //END document.ready
        </script>
    </head>
    <body>
        <!-- HTML CODE IN HERE -->
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta tags go here>
    </head>
    <body>
        <!-- HTML CODE IN HERE -->
        <style>
            /*  Style code in here */
        </style>
        <script type="text/javascript" src="https://CDN/jquery.js"></script>
        <script>
            $(document).ready(function(){
                /*  jQuery code in here */
            }); //END document.ready
        </script>
    </body>
</html>

如果您使用第一种方法，那么您还可以创建这些外部文件：

 public_html/css/common.css
 public_html/js/jquery.min.js <--- downloaded from jQuery web site
 public_html/js/myscripts.js

对于CSS文档，您只需从<style></style>标记之间获取代码并将其保存到该外部文件中。

对于jQuery文档，您只需从<script></script>标记之间获取代码并将其保存到该外部文件中。

上面，请注意public_html是您的webroot。如果您从GoDaddy或HostGator等购买在线共享主机，则通常为public_html。如果您在本地安装XAMPP，它将是htdocs。如果是WAMP或MAMP，它将是www。

用于检查是否已点击多个imgs弹出窗口的逻辑

2 个答案: