使用另一个div的单击处理程序更改一个div的类

Question

我正在写一个在线UNO游戏的课程（这不是一个分级作业，只是一个课程项目）。我目前正在尝试开发播放卡片的功能。基本上，玩家需要能够点击他们手中的牌并将其显示在弃牌堆中。我考虑过制作动画，但是我们还剩1个星期，还有很多工作要做，所以我的想法就是让玩家双击卡片然后它会出现在弃牌堆中。

所有玩家手中的每张牌都是通过后端信息在javascript中创建的单独div。但是，我没有将代码连接到后端，因为我现在需要能够测试我的函数和脚本。因此，我目前对这些卡进行了硬编码。

弃牌堆上有一张牌。我已经确定我们实际上并不需要将每张卡放在弃牌堆上。相反，它应该足以改变丢弃堆上的卡的颜色和等级以反映被丢弃的卡并且仅从玩家的手中消除该div。如果您认为我错了，请告诉我。

这就是我的问题所在。我在这里有一些脚本应该擦除丢弃堆卡的颜色，并用在玩家手中点击的div卡的颜色替换它。这是代码（后面发布的完整代码）：

/*
The double-click on the card in the player's hand does erase the color from the discard pile card, but it doesn't add the color of the card from the hand to the discard pile card. I have tried different variations of the code, but none seem to work. Can anyone help me? Or am I thinking about this the wrong way?
*/


$(document).ready(function() {


  function playCardThisPlayer(game) {
    currCardColor = $(this).color;
    $(".card").dblclick(function() {
      $(".discardPile").removeClass(game.discardPile.color);
      $(".discardPile").addClass.$(currCardColor);
    });
  }

  playCardThisPlayer(gameTurn);

  var gameTurn = {
    deckCount: 40,
    discardPile: {
      color: "yellow",
      rank: "2"
    },
    players: [{
        name: "David", //players[0].name
        hand: [{
            color: "yellow",
            rank: "3"
          },
          {
            color: "blue",
            rank: "3"
          },
          {
            color: "red",
            rank: "4"
          },
          {
            color: "black",
            rank: "w"
          },
          {
            color: "blue",
            rank: "7"
          },
          {
            color: "blue",
            rank: "8"
          },
          {
            color: "green",
            rank: "S"
          }
        ]
      },
      {
        name: "Dan", //players[1].name
        hand: 4 //players[1].hand
      },
      {
        name: "John", //players[2].name
        hand: 5 //players[2].hand
      },
      {
        name: "Kent", //players[3].name
        hand: 10 //players[3].hand
      },
      {
        name: "Amy",
        hand: 15
      }
    ]
  };

  function makePlayerList(game) {
    for (i = 0; i < game.players.length; i++) {
      $(".list").append("<p>" + (i + 1) + ". " + game.players[i].name + "</p>");
    }
  }

  makePlayerList(gameTurn);

  function createCards(game) {
    var currPlayer = game.players[0];
    var hand = $("<div class='hand'></div>");
    for (var i = 0; i < currPlayer.hand.length; i++) {
      var card = $("<div class='card'></div>" /*<div class='playerLabel'></div>"*/ );
      card.addClass(".oval-shape");
      var corner1 = $("<div></div>");
      var middle = $("<div></div>");
      var corner2 = $("<div></div>");
      var oval = $("<div></div>")
      corner1.append(currPlayer.hand[i].rank);
      corner1.addClass("corner1");
      middle.append(currPlayer.hand[i].rank);
      middle.addClass("middle");
      oval.addClass("oval-shape");
      card.append(oval);
      corner2.append(currPlayer.hand[i].rank);
      corner2.addClass("corner2");
      card.append(corner1);
      card.append(middle);
      card.append(corner2);
      card.addClass(currPlayer.hand[i].color);
      hand.append(card);
    }

    $("#table").append(hand);
  }

  function createCardBacks(game) {
    for (var i = 1; i < game.players.length; i++) {
      var hand = $("<div class='hand'></div>");
      for (var j = 0; j < game.players[i].hand; j++) {
        var cardBack = $("<div class='cardBack black'></div>");
        var oval = $("<div></div>")
        oval.addClass("oval-shape");
        cardBack.append(oval);
        hand.append(cardBack);
      }
      $("#table").append(hand);
    }
  }

  function createDiscardPile(game) {
    var topOfDiscardPile = $(".discardPile");
    topOfDiscardPile.addClass(".oval-shape");
    var corner1 = $("<div></div>");
    var middle = $("<div></div>");
    var corner2 = $("<div></div>");
    var oval = $("<div></div>")
    corner1.append(game.discardPile.rank);
    corner1.addClass("corner1");
    middle.append(game.discardPile.rank);
    middle.addClass("middle");
    oval.addClass("oval-shape");
    topOfDiscardPile.append(oval);
    corner2.append(game.discardPile.rank);
    corner2.addClass("corner2");
    topOfDiscardPile.append(corner1);
    topOfDiscardPile.append(middle);
    topOfDiscardPile.append(corner2);
    topOfDiscardPile.addClass(game.discardPile.color);
  }

  createCards(gameTurn);
  createCardBacks(gameTurn);
  createDiscardPile(gameTurn);

  function playCardThisPlayer(game) {
    currCardColor = $(this).color;
    $(".card").dblclick(function() {
      $(".discardPile").removeClass(game.discardPile.color);
      $(".discardPile").addClass.$(currCardColor);
    });
  }

  playCardThisPlayer(gameTurn);

  function fan(container, angle) {
    var num = $(container).children().length;
    var rotate = -angle * Math.floor(num / 2);
    $(container).children().each(function() {
      $(this).data("rotate", rotate);
      $(this).css("transform", "translate(-50%,0) rotate(" + rotate + "deg)");
      $(this).css("transform-origin", "0 100%");
      rotate += angle;
    });

    $(container).children().mouseenter(function() {
      var rotate = parseInt($(this).data("rotate")) * Math.PI / 180;
      $(this).css("top", (-3 * Math.cos(rotate)) + "vmin");
      $(this).css("left", (3 * Math.sin(rotate)) + "vmin");
    });
    $(container).children().mouseleave(function() {
      $(this).css("top", 0);
      $(this).css("left", 0);
    });
  }

  var rotate = 0;
  var num = $("#table").children().length;
  var angleInc = 360 / num;
  $("#table").children().each(function(idx) {
    $(this).css("transform", "rotate(" + rotate + "deg)");
    $(this).append("<div class='playerLabel'><span>" + (idx + 1) + "</span></div>")
    $(this).css("transform-origin", "50% -18vmin");
    fan(this, (idx == 0) ? 7 : 2.5);
    rotate += angleInc;
  });
});

* {
  margin: 0;
  padding: 0;
}

body {
  background: #00a651;
}

#table {
  width: 100vmin;
  height: 100vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #00FF00;
  border-radius: 50%;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}

.discardPile {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
}

.card,
.discardPile {
  width: 15vmin;
  height: 22vmin;
  border-radius: 1vmin;
  background: #fff;
  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
  text-shadow: 2px 2px 0px #808080;
  border: .3em solid white;
  transition: all 0.125s;
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 10vmin;
  width: 0;
  height: 22vmin;
}

span {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.playerLabel {
  margin-top: -10vh;
  background-color: red;
  width: 3vmin;
  height: 3vmin;
  border: 1px solid black;
  border-radius: 50%;
}

.list {
  color: yellow;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 3vmin;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.black {
  background-color: black;
}

.corner1 {
  position: absolute;
  font-size: 3.5vmin;
  left: .5vmin;
  top: .5vmin;
  color: white;
}

.corner2 {
  position: absolute;
  font-size: 3.5vmin;
  right: .5vmin;
  bottom: .5vmin;
  color: white;
}

.middle {
  position: absolute;
  font-size: 10vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.oval-shape {
  width: 10vmin;
  height: 22vmin;
  background: white;
  border-radius: 7vmin / 15vmin;
  transform: translate(-50%, -50%) rotate(25deg);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
}

.slide-out {
  top: -3vmin;
}

.cardBack {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 15vmin;
  height: 22vmin;
  border-radius: 1vmin;
  -webkit-box-shadow: .3vmin .3vmin .7vmin rgba(0, 0, 0, 0.3);
  box-shadow: .3vmin .3vmin .7vmin rgba(0, 0, 0, 0.3);
  text-shadow: .2vmin .2vmin 0 #808080;
  border: .3em solid white;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>UNO Cards</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="list"></div>
  <div class="discardPile"></div>
  <div id="table"></div>

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

</html>

谢谢！