使用.click

時圖像元素消失我一直在努力工作在這最後幾個小時，但我不能繼續沒有最後的jquery函數，我試圖拿到卡（國王是一張測試卡）當我點擊它時跟隨我的鼠標。當我點擊它就會消失。使用.click

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; 
}

現在，我試圖讓圖像跟隨我的鼠標，但是當我點擊它只是消失。它不會拋出任何控制檯錯誤，它只是消失。我被要求發佈整個代碼，所以我已經完成了。

來源

2013-03-10 user1792457

作品：http://jsfiddle.net/erGta/ – Blender 2013-03-10 08:06:41

我注意到，你在做這個的時候'＃playerHand' div正在被點擊。除非您不顯示其他CSS，否則該div的大小與該卡的大小相同。 – TylerH4 2013-03-10 08:14:00

已更新，整個代碼 – user1792457 2013-03-10 09:11:07

我在你的帖子中試過了代碼。但除了卡片生成以外，它似乎沒有太多的工作。我認爲你需要看看http://jqueryui.com/draggable

如果你只是可以拖動卡片，你的紙牌遊戲將會更有用。

來源

2013-03-10 08:11:53 Bart

我試過了，但它仍然消失。 – user1792457 2013-03-10 08:12:57

我也注意到圖像不是塊元素。所以'left'和'right'不應該影響它。嘗試添加'display：block;'到'.heh' – Bart 2013-03-10 08:16:39

我嘗試了block以及相同的東西。 – user1792457 2013-03-10 08:57:36

也適合我。你需要共享你的整個代碼或提供撥弄它不爲我工作

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) 
    }); 
}); 
});

來源

2013-03-10 08:33:00 vdua

整個代碼它是 HTML：。 – user1792457 2013-03-10 08:58:16

代碼已經@vdua – user1792457 2013-03-10 09:31:34

你忘了功能pickupCard更新試試這個jsbin http://jsbin.com/egelip/3/edit 添加功能的JavaScript對話框 – vdua 2013-03-11 12:59:40

回答

相關問題