javascript - 使用 .click 时图像元素消失

Question

在过去的几个小时里，我一直在努力解决这个问题，但是如果没有最后一个 jquery 函数，我将无法继续，当我点击它时，我试图让卡片（国王是一张测试卡片）跟随我的鼠标. 当我点击它就消失了。

html:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Well, I've Never!!</title>
    <link type="text/css" rel="stylesheet" href="ivenever.css" />

  </head>

  <body>
      <aside>
          <input type="button" id="newgame" value="New Game" onclick="newGame()"/>
      </aside>

    <div id="table">

      <!--Containers for the computer's hand-->
      <div id="computer">
        <div id= "computerTableDown"></div>
        <div id= "computerTableUp"></div>
        <div id= "computerHand"></div>
      </div><!--computer container end-->

      <!--Container for the cards in the middle-->
      <div id="middle">
        <div id="undealtCards"></div>
        <div id="middleCards"></div>
      </div><!--middle container end-->


      <!--Containers for the Player's hand-->
      <div id="player">
        <div id= "playerTableDown"></div>
        <div id = "playerTableUp"></div>
        <div id= "playerHand"></div>
      </div><!--player container end-->

    </div><!--Table end-->

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="carddeck.js"></script>
  </body>
</html>

JS/JQUERY：

// the array that holds the cards
var deck;
//the deck of cards object
var newDeck;

//the players hand
var playerHand;
var playerUp;
var playerDown;
//the computer's hand
var compHand;
var compUp;
var compDown;

//the cards in the middle
var middleCards;

//Players turn
var playersTurn = true;

function Card (rank, suit, url)
{
    this.rank= rank;
    this.suit = suit;
    this.url = url;
}
//the function that will return the rank of the card
Card.prototype.getRank = function ()
{
    return this.rank;
}
//the function that returns the suit (not really needed for my game)
Card.prototype.getSuit = function ()
{
    return this.suit;
}
//the function for returning the url of the card for displaying
Card.prototype.getUrl = function ()
{
    return this.url;
}

function CardDeck ()
{
    deck = [];
    //fill array diamonds
    for (var i=0; i < 13; i++)
    {
        var cardD = new Card(i+1, "diamonds", ( "images/diamonds/" + (i+1)+"diamond.png"));
        deck.push(cardD);
    }

    //fill array clubs
    for (var i=0; i < 13; i++)
    {
        var cardC = new Card(i+1, "clubs", ("images/clubs/" + (i+1)+"club.png"));
        deck.push(cardC);
    }

    //fill array hearts
    for (var i=0; i < 13; i++)
    {
        var cardH = new Card(i+1, "hearts", ("images/hearts/" + (i+1)+"heart.png"));
        deck.push(cardH);
    }

    //fill array spades
    for (var i=0; i < 13; i++)
    {
        var cardS = new Card(i+1, "spades", ("images/spades/" + (i+1)+"spade.png"));
        deck.push(cardS);
    }
}

//displaying the deck (mostly for debugging etc)
CardDeck.prototype.showDeck = function ()
{
    var allCards ="";
    for (var i =0 ; i < deck.length; i++)
        allCards += "card with the rank " + deck[i].getRank() +" of " + deck[i].getSuit() + " has an image url of " + deck[i].getUrl()+"\n";
    alert(allCards);
}

//shuffle the cards
CardDeck.prototype.shuffle = function ()
{
    var shuffledDeck = deck;
    for (var i =0; i< 10; i++)
    {
        for (var i = 0; i < shuffledDeck.length; i++)
        {
            var random = Math.floor((Math.random()*51));
            var tmp = shuffledDeck[i];
            var tmp2 = shuffledDeck[random];
            shuffledDeck[i]= tmp2;
            shuffledDeck[random]= tmp;
        }

    }
    deck=shuffledDeck;
}

//deal a card as long as there at least one left in the deck
CardDeck.prototype.dealCard = function ()
{
    if (deck.length >0)
    {
        var dealtCard = deck[0];
        deck.shift();
        return dealtCard;
    }
    else
    {
        //jquery to get rid of the image element
        $('#undealtCards').replaceWith('<img src="images/cardempty.png" class="noHand" height="100" width="69"/>');
    }
}

//create the deck that will be used
function makeDeck()
{
    iveNever = new CardDeck();
}

function newGame()
{
    //reset everything
    //$('#computerTableDown').replaceWith('');
    //initialize deck
    makeDeck();
    iveNever.shuffle();
    $('#undealtCards').append('<img src="images/cardback.png" class="hand" height="100" width="69" onclick="drawCard()"/>');

    //initialize player's hand
    playerHand = [];
    playerUp=[];
    playerDown=[];

    //initialize computer's hand
    compHand = [];
    compUp=[];
    compDown=[];

    initialDeal();
    showHands();
}

function initialDeal()
{
    for (var i =0; i<6; i++)
    {
        if (i % 2 === 0)
            compDown.push(iveNever.dealCard());
        else
            playerDown.push(iveNever.dealCard());
    }

    for (var i =0; i<6; i++)
    {
        if (i % 2 === 0)
            compUp.push(iveNever.dealCard());
        else
            playerUp.push(iveNever.dealCard());
    }

    for (var i =0; i<6; i++)
    {
        if (i % 2 === 0)
            compHand.push(iveNever.dealCard());
        else
            playerHand.push(iveNever.dealCard());
    }
}
//function for showing hands (currently for debugging)
function showHands()
{

    //show the down cards
    for (var i=0; i < 3; i++)
    {
        //computers down cards
        $('#computerTableDown').append('<img src="images/cardback.png" class="cardsTable" height="100" width="69">');
        $('#playerTableDown').append('<img src="images/cardback.png" class="cardsTable" height="100" width="69">');
    }

    //show the down cards
    for (var i=0; i < 3; i++)
    {
        //computers up cards
        $('#computerTableUp').append('<img src="' + compUp[i].getUrl() + '" class="cardsTable" height="100" width="69">');
        $('#playerTableUp').append('<img src="' + playerUp[i].getUrl() + '" class="cardsTable" height="100" width="69">');
    }

    //show the Hand cards
    for (var i=0; i < 3 ; i++)
    {
        $('#playerHand').append('<img src="' + playerHand[i].getUrl() + '" class="cardsHand" height="100" width="69" onclick="pickupCard()"> ');
        $('#computerHand').append('<img src="' + compHand[i].getUrl() + '" class="cardsHand" height="100" width="69"> ');
    }

}

function drawCard()
{
    //only for player at this moment
    if (playersTurn)
    {
        playerHand.push(iveNever.dealCard());
        updatePlayerHand();
    }
    else
    {
        //compHand.push(iveNever.dealCard());
        //updateComputerHand();
    }
}

function updatePlayerHand()
{
    //show the player's Hand cards
    for (var i=playerHand.length-1; i < playerHand.length ; i++)
    {
        $('#playerHand').append('<img src="' + playerHand[i].getUrl() + '" class="cardsHand" height="100" width="69" onclick="pickupCard()">');//onclick="pickupCard()"
    }
}

function updateComputerHand()
{
    //show the Hand cards
    for (var i=compHand.length-1; i < compHand.length ; i++)
    {
        $('#computerHand').append('<img src="' + compHand[i].getUrl() + '" class="cardsHand" height="100" width="69">');
    }

}

$('#playerHand').click(function(e){
    $('img.heh').css
    ({
        'top': (e.clientY - 20), 
        'left': (e.clientX - 20)
    });
});

CSS：

body{

}
#table{
    width:1000px;
    height:800px;
    background-image: url('images/felt.png');
    position:absolute;
    z-index: 0;

}

#computer{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:0px;
    width:900px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

#computerTableDown{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:150px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#computerTableUp{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:150px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#computerHand{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:5px;
    width:900px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
    border-style: dashed;
    border-width: 2px;
    border-color: black;
}

#middle{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:300px;
    width:500px;
    height:200px;
}

#middleCards{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:0px;
    width:300px;
    height:200px;
    border-style: dotted;
    border-width: 2px;
    border-color: black;
    cursor: default;
}

#undealtCards{
    postion:absolute;
    left:0;
    right:0;
    top:0;
    margin-left: 10px;
    margin-top: 50px;
    top:10px;
    width:70px;
    height:100px;

}

.hand{
    cursor: hand; 
    cursor: pointer;
}

.noHand{
        cursor: default; 
}

#player{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:500px;
    width:900px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

#playerTableDown{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:15px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#playerTableUp{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:15px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#playerHand{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:160px;
    width:900px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
    border-style: dashed;
    border-width: 2px;
    border-color: white;
}

.cardsTable {
    margin-top:10px;
    margin-left:24px;
}

.cardsHand{
    margin-top:10px;
    margin-left:24px;
    cursor: hand; 
    cursor: pointer;
}

.heh{
    display:block;
    position:absolute;
    z-index: 2000;
}

现在，我试图让图像跟随我的鼠标，但是当我点击它时它就消失了。它不会引发任何控制台错误，它只是消失了。我被要求发布整个代码，所以我已经完成了。

score 0 · Accepted Answer

也为我工作。你需要分享你的整个代码或提供一个不起作用的小提琴

http://jsfiddle.net/SVKeE/

$(function() {
$('#playerHand').click(function(e){
    //$(this).removeClass('cardsHand');
    //$(this).addClass('clickedCard');
    $('img.heh').css
    ({
        'top': (e.clientY - 20), 
        'left': (e.clientX - 20)
    });
});
});

score 0 · Accepted Answer

我尝试了您帖子中的代码。但除了卡片生成之外，它似乎并没有做太多事情。我认为您需要查看http://jqueryui.com/draggable

如果您可以拖动纸牌，您的纸牌游戏会更有用。

javascript - 使用 .click 时图像元素消失

2 回答 2

Related

Reference