Question

我是JavaScript新手，请耐心等待。我正在尝试使这个小“游戏”在将卡片拖到放置箱中的情况下起作用，当您将小丑卡放到其中时说“胜利”，否则说其他卡片“背叛”。放下小丑时，除了说“胜利”的那部分外，其他所有东西都很好。我觉得我已经尝试了一切。小丑卡是$（＃black_joker）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Drag and Drop</title>
    <link rel="stylesheet" href="dragdrop.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


</head>

<body>


    <h1>Find the Joker and eliminate him!</h1>


<br>
<input type="button" value="Deal!" id="dealDeck">
<br>
<br>
<br>
<br>
<br>
<div id='dropZone' class='dropZone'> <center>Find the joker card and drop it here to get rid of him once and for all! </center></div>


    <script src="dragdrop.js"></script>


    </body>
</html>

// JAVASCRIPT 

$(document).ready(function () {

    $(init);

    function init() {
      $('.dropZone').droppable({
        drop: handleDropEvent
      });
    }




    for (var a=0, all = 53; a < all; a++){
    $('#dealDeck').click(function () {
      dealCard(randomCard());
    });    
    }

    var cardsInDeck = new Array();

    var numberOfCardsInDeck = 53;
    cardsInDeck[0] = "C1";
    cardsInDeck[1] = "C2";
    cardsInDeck[2] = "C3";
    cardsInDeck[3] = "C4";
    cardsInDeck[4] = "C5";
    cardsInDeck[5] = "C6";
    cardsInDeck[6] = "C7";
    cardsInDeck[7] = "C8";
    cardsInDeck[8] = "C9";
    cardsInDeck[9] = "C10";
    cardsInDeck[10] = "C11";
    cardsInDeck[11] = "C12";
    cardsInDeck[12] = "C13";
    cardsInDeck[13] = "D1";
    cardsInDeck[14] = "D2";
    cardsInDeck[15] = "D3";
    cardsInDeck[16] = "D4";
    cardsInDeck[17] = "D5";
    cardsInDeck[18] = "D6";
    cardsInDeck[19] = "D7";
    cardsInDeck[20] = "D8";
    cardsInDeck[21] = "D9";
    cardsInDeck[22] = "D10";
    cardsInDeck[23] = "D11";
    cardsInDeck[24] = "D12";
    cardsInDeck[25] = "D13";
    cardsInDeck[26] = "H1";
    cardsInDeck[27] = "H2";
    cardsInDeck[28] = "H3";
    cardsInDeck[29] = "H4";
    cardsInDeck[30] = "H5";
    cardsInDeck[31] = "H6";
    cardsInDeck[32] = "H7";
    cardsInDeck[33] = "H8";
    cardsInDeck[34] = "H9";
    cardsInDeck[35] = "H10";
    cardsInDeck[36] = "H11";
    cardsInDeck[37] = "H12";
    cardsInDeck[38] = "H13";
    cardsInDeck[39] = "S1";
    cardsInDeck[40] = "S2";
    cardsInDeck[41] = "S3";
    cardsInDeck[42] = "S4";
    cardsInDeck[43] = "S5";
    cardsInDeck[44] = "S6";
    cardsInDeck[45] = "S7";
    cardsInDeck[46] = "S8";
    cardsInDeck[47] = "S9";
    cardsInDeck[48] = "S10";
    cardsInDeck[49] = "S11";
    cardsInDeck[50] = "S12";
    cardsInDeck[51] = "S13";
    cardsInDeck[52] = "black_joker";

    function dealCard(i) {
      if (numberOfCardsInDeck == 0) return false;
      var img = document.createElement("img");
      img.src = "http://deetito.com/images/" + cardsInDeck[i] + ".png";
      img.id = cardsInDeck[i];
      img.width = 100;
      img.height = 125;
      document.body.appendChild(img);
      $('#C1').draggable();
      $('#C2').draggable();
      $('#C3').draggable();
      $('#C4').draggable();
      $('#C5').draggable();
      $('#C6').draggable();
      $('#C7').draggable();
      $('#C8').draggable();
      $('#C9').draggable();
      $('#C10').draggable();
      $('#C11').draggable();
      $('#C12').draggable();
      $('#C13').draggable();
      $('#D1').draggable();
      $('#D2').draggable();
      $('#D3').draggable();
      $('#D4').draggable();
      $('#D5').draggable();
      $('#D6').draggable();
      $('#D7').draggable();
      $('#D8').draggable();
      $('#D9').draggable();
      $('#D10').draggable();
      $('#D11').draggable();
      $('#D12').draggable();
      $('#D13').draggable();
      $('#H1').draggable();
      $('#H2').draggable();
      $('#H3').draggable();
      $('#H4').draggable();
      $('#H5').draggable();
      $('#H6').draggable();
      $('#H7').draggable();
      $('#H8').draggable();
      $('#H9').draggable();
      $('#H10').draggable();
      $('#H11').draggable();
      $('#H12').draggable();
      $('#H13').draggable();
      $('#S1').draggable();
      $('#S2').draggable();
      $('#S3').draggable();
      $('#S4').draggable();
      $('#S5').draggable();
      $('#S6').draggable();
      $('#S7').draggable();
      $('#S8').draggable();
      $('#S9').draggable();
      $('#S10').draggable();
      $('#S11').draggable();
      $('#S12').draggable();
      $('#S13').draggable();
      $('#black_joker').draggable();
      removeCard(i);
    }

    function randomCard() {
      return Math.floor(Math.random() * numberOfCardsInDeck);
    }

    function handleDropEvent(event, ui) {
      var card = ui.draggable;
      if (card == 'black_joker') {
      $('#dropZone').html('victory!');}
      else {
        $('#dropZone').html('betrayal!');} 
      /*$('#dropZone').droppable({
            drop: function(event, ui) {
                ui.draggable.remove();
            }
        });*/

      $("#dropZone").on('mouseover', function() {
        //alert('bye draggable!');
        //ui.draggable.draggable('disable');
        //$(this).droppable('disable');
        ui.draggable.remove();
      })

  }





    function removeCard(c) {
      // simply make every higher numbered card move down 1
      for (j = c; j <= numberOfCardsInDeck - 2; j++) {
        cardsInDeck[j] = cardsInDeck[j + 1];
      }
      numberOfCardsInDeck--;
    }

    });

Answer 1

我相信您正在将对象与字符串进行比较。 ui.draggable应该是jQuery对象

let card = ui.draggable.attr("id");

将其与您的ID或您想使用的其他属性进行比较

如何在Java脚本的if语句中添加图像？

1 个答案: