Question

我试图将这个任务放在一起，我需要将卡片图像放在容器中的卡片阵列中。但我唯一得到的就是5个正方形，只是说“对象对象”。＆＃39;我现在已经搞乱了大约4个小时，我感到非常困惑和不知所措。我很感激帮助我显示图片。

HTML

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="jQueryRoot/jquery-ui.min.css">
        <script src="jQueryRoot/external/jquery/jquery.js"></script>
        <script src="jQueryRoot/jquery-ui.min.js"></script>
        <script src="jQueryRoot/Assignment5.js"></script>
        <link rel="stylesheet" href="styles/style.css">
    </head>

    <body>
        <p>Card Dealer </p>
        <button id="shuffle">shuffle deck</button>
        <button id="draw">draw cards</button> 
        </p>
        <br />
        <br />

        <div id="deck">
            <img src="images\b2pl.png" class="deck">
            <img src="images\b2pl.png" class="deck">
            <img src="images\b2pl.png" class="deck">
            <img src="images\b2fv.png" class="deck" id="dealcards" >
        </div>

        <p id="remainingCards"></p>

<!-- PLACEHOLDER FOR CARDS TO BE DROPPED/DISCARDED--> 
        <div class="cardHolder" >
            <p>Dealt hand</p> 
            <table id="dealtHand" class="connectedSortable">
                <tr class="dealtCards">
                </tr>
            </table>
        </div>

<!-- PLACEHOLDER FOR CARDS TO BE DROPPED/DISCARDED-->
        <div class="cardHolder"> 
            <p>Discards</p>
            <table id="discards" class="connectedSortable">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </body>
</html>

CSS

div > p {
    background-color:lightgreen;}

.cardHolder {
    border: solid 2px gray; 
    width:600px;}

#dealtHand, #discards { 
    border: 1px solid #eee; 
    width: 600px; 
    height: 110px;
    min-height: 110px; 
    list-style-type: none; 
    margin: 0;  
    padding: 0 0 0 0;
    margin-right: 0px;}

#dealtHand li, #discards li {  
    margin: 1px; 
    border: none; 
    font-size: 1.2em;
    float: left; 
    width: 80px; 
    height:100px;}

.cards {
    border:1px solid black; 
    margin-left:5px; 
    float:left;}

JS

$(document).ready(function()
{

    // ARRAY OF 52 CARD IMAGES          
    var shuffle = $(function() 
    {
        var deck = ["<img src='images/1.png'>","<img src='images/2.png'>",
        "<img src='images/3.png'>","<img src='images/4.png'>","<img src='images/5.png'>",
        "<img src='images/6.png'>","<img src='images/7.png'>","<img src='images/8.png'>",
        "<img src='images/9.png'>","<img src='images/10.png'>","<img src='images/11.png'>",
        "<img src='images/12.png'>","<img src='images/13.png'>","<img src='images/14.png'>",
        "<img src='images/15.png'>","<img src='images/16.png'>","<img src='images/17.png'>",
        "<img src='images/18.png'>","<img src='images/19.png'>","<img src='images/20.png'>",
        "<img src='images/21.png'>","<img src='images/22.png'>","<img src='images/23.png'>",
        "<img src='images/24.png'>","<img src='images/25.png'>","<img src='images/26.png'>",
        "<img src='images/27.png'>","<img src='images/28.png'>","<img src='images/29.png'>",
        "<img src='images/30.png'>","<img src='images/31.png'>","<img src='images/32.png'>",
        "<img src='images/33.png'>","<img src='images/34.png'>","<img src='images/35.png'>",
        "<img src='images/36.png'>","<img src='images/37.png'>","<img src='images/38.png'>",
        "<img src='images/39.png'>","<img src='images/40.png'>","<img src='images/41.png'>",
        "<img src='images/42.png'>","<img src='images/43.png'>","<img src='images/44.png'>",
        "<img src='images/45.png'>","<img src='images/46.png'>","<img src='images/47.png'>",
        "<img src='images/48.png'>","<img src='images/49.png'>","<img src='images/50.png'>",
        "<img src='images/51.png'>","<img src='images/52.png'>"];
        var current = [];

        function rand(n) 
        {
            return (Math.random() * n)|0;
        }

        return function() 
        {
          if (!current.length) current = deck.slice();
          return current.splice(rand(current.length), 5);
        };
    });

    // DEAL FIVE CARDS
    var counter = 0;
    $("#dealcards").click(function()
    {    
        $('.dealtCards').each(function()
        {       
            if(counter < 52)
            {
                $(".cards").empty().remove();
            }               
            for(var i = counter; i < (counter + 5); i++)
            {
                $('<td class="cards">' + shuffle + '</td>').appendTo(".dealtCards"); 
            }

            counter = counter + 5;
            $("#remainingCards").html("Cards remaining: " + (52 - counter)); 

            if(counter < 5)
            {
                alert("There are no more cards. You must Deal Again!");
            }

        });
    });             
});

有人可以帮忙吗？

jQuery Image Array＆＃39; Object Object＆＃39;错误

0 个答案: