如何在 Javascript 的 if 语句中添加图像？

Question

I'm new at JavaScript to be patient with me.我是 JavaScript 的新手，请耐心等待。 I'm trying to get this little "game" to work where you drag cards in the drop box, and when you drop the joker card in it says "victory", otherwise it says "betrayal" for the other cards.我试图让这个小“游戏”在您将卡片拖放到下拉框中的地方工作，当您将小丑卡片放入其中时，它会显示“胜利”，否则它会显示其他卡片的“背叛”。 Everything works great except the part where it says "victory" when you drop the joker.一切都很好，除了当你放下小丑时它说“胜利”的部分。 I feel like I have tried everything.我觉得我已经尝试了一切。 The joker card is $(#black_joker)百搭牌是 $(#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

I believe you are comparing object with string.我相信您正在将 object 与字符串进行比较。 ui.draggable should be jQuery object ui.draggable 应该是 jQuery object

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

compare it with your id or other attribute you wanted to use should work将其与您的 id 或您想使用的其他属性进行比较应该可以工作

如何在 Javascript 的 if 语句中添加图像？

问题描述

1 个解决方案

解决方案1
0 2019-10-14 03:35:39

如何在 Javascript 的 if 语句中添加图像？

问题描述

1 个解决方案

解决方案1 0 2019-10-14 03:35:39

解决方案1
0 2019-10-14 03:35:39