Question

我有一个在课堂上做一个简单的拖放游戏。我在计算可放置区域中丢弃元素的数量时遇到问题。

有人可以帮忙吗？

提前谢谢你。

以下是代码：

     <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>CookbookGame</title>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <!--[if !IE 7]>
    <style type="text/css">
    #wrap {display:table;height:100%}
    </style>
    <![endif]-->
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>

    $(document).ready(function(){
    /* starts the counter at zero*/
    var counter=0;
    ingredients();
    /*check count amount*/
    function check()
    {
    if (counter == 4);
    { alert ("well done");
    location.href="recipe.html";
    }
    };
    function count()  /*this is the counter function*/
    {
    counter = counter + 1    
    /* this line calls count which is equal to its self and each time            count is called it will add one to itself*/

    }
    });

    function ingredients()
    { 
    /*This is the main part of the script*/
    $(".salt, .pepper, .honey").draggable({ revert: "invalid" });

    $(".milk").draggable({ revert: "valid" });
    $("#bowl").droppable({ 
    accept: ".milk",
    drop: function( event, ui ) {
    count();
    check(); 
    }
    });

    $(".egg").draggable({ revert: "valid" });
    $("#bowl").droppable({
    accept: ".egg",
    drop: function( event, ui ) {
    count();
    check();
    }
    });

    $(".flour").draggable({ revert: "valid" });
    $("#bowl").droppable({
    accept: ".flour",
    drop: function( event, ui ) {
    count();
    check();
    }
    });

    $(".sugar").draggable({ revert: "valid" });
    $("#bowl").droppable({
    accept: ".sugar",
    drop: function( event, ui ) {
    count();
    check();
    }
    });
    };
    </script>
</head>
<body>
    <div id="header">CookBook Game</div>
    <h3>The stuff you need to use to make the pancakes are on the top shelf.<br /> Be careful there are extra ingreedients there to stop you completing your task.</h3>
    <div id="pancake">Pancakes</div>
    <div id="playarea">
        <div id="tarea">
            <table id="shelf">
                <tr>
                    <td><div class="milk"><img src="images/milkjug.png" ></div></td>
                    <td><div class="egg"><img src="images/eggs.png" ></div></td>
                    <td><div class="flour"><img src="images/flour.png"></div></td>
                    <td><div class="honey"><img src="images/honey.png"></div></td>
                    <td><div class="sugar"><img src="images/sugar.png"></div></td>
                    <td><div class="salt"><img src="images/salt.png"></div></td>
                    <td><div class="pepper"><img src="images/pepper.png"></div></td>
                </tr>
            </table>
        </div>
        <div id="barea">
            <div id="bowl"><img src="images/bowl.png"></div>

        </div>
    </div>

</body>

Answer 1

拥有成分的类名。

$("#bowl .classname").length; // assuming bowl is the droppable area.

如何计算可放置区域中的可拖动元素？

1 个答案: