Else 语句运行两次 jQuery

Question

https://jsfiddle.net/mpcbLgtt/2/

我在做什么：一个函数，当一个类 card 的 div 被点击时，它应该将它的名字添加到一个名为 deck 的数组中，并将它的 id 添加到一个名为 cardIds 的数组中。

这是卡片：

<div class='card' id='1' name='dinosaur'>Dinosaur</div>
<div class='card' id='2' name='crab'>Crab</div>

如果阵列中已经有 2 张这张卡，那么它应该什么都不做。

如果没有卡片，那么它会将一个deckItem div 附加到decklist div 上。

<div class="decklist"></div>

这就是问题所在。如果数组中已经有 1 张卡片，我不想将卡片附加到 'decklist' div，而是删除前一张卡片并添加一张上面有“x2”的新卡片。

此时的代码可以删除之前的卡。但是，当它附加以下代码时，它会执行两次。例如。我单击一张名为“Dinosaur”的卡片，它会将其附加到数组中。然后，如果我再次单击卡片“恐龙”，它将输出“恐龙 x2”“恐龙 x2”，而不仅仅是“恐龙 x2”

$(".decklist").append($replacement);

完整的代码如下。

var deck = [];
var cardIds = [];
$(".card").click(function(){
    $cardName = $(this).attr("name");
        $cardId = $(this).attr("id");
        $occurances = 0;
        for (var i = 0; i<deck.length; i++) {
            if (deck[i]==$cardName) {
                $occurances++;
            }
        }

        //if there are less than 2 of this card in deck array
        if ($occurances<2) {
            //add the card to array
            deck.push($cardName);
            cardIds.push($cardId);
            deck.sort();
            //empty the decklist div
            $(".decklist").empty(); 
            //go through all the cards in the deck array.
            //if that card appears once append it else replace it
            for (var i = 0; i < deck.length; i++) {
                //count the number of times this card is in the deck array
                $count = 0;
                for (var k = 0; k < deck.length; k++) {
                    if (deck[k] == deck[i]) {
                        $count++;
                    }
                }
                if ($count == 1) {
                    //this runs once
                    var $toBeAppended = $("<div class='deckItem' id='"+cardIds[i]+"'>"+deck[i]+"</div>");
                    $(".decklist").append($toBeAppended);
                } else {
                    //this runs twice
                    var $replacement = $("<div class='deckItem' id='"+cardIds[i]+"'>"+deck[i]+" x2</div>");
                    $(".decklist").remove(".deckItem#"+cardIds[i]);
                    $(".decklist").append($replacement);
                }
            }
        }

Answer 1

我认为问题在于计数。 如果deck=[Max, Dinosaur, Dinosaur] 你算1 Max，然后对于每个 Dinosaur 你算2 Dinosaurs。

编辑，这是错误的：您的计数应该从 k=i+1 开始，而不是从 0 开始 - 这样您就不会计算过去的次数。

您的计数应该简化过去的出现次数，您可以创建一个数组，并在第一次出现后将卡片放在那里，并在计数之前检查卡片是否已添加到数组中。

Answer 2

你实际上有多个问题。

• 您对每张卡的计数不排除已匹配的重复项
• 您的页面中有重复的 ID 值，这是无效的 HTML，浏览器只会找到第一个匹配项。我在较低的卡片 ID 中添加了 card 前缀，并为上面的卡片添加了唯一编号 1-3。

代码：

$(document).ready(function() {
  var deck = [];
  var cardIds = [];
  $(".card").click(function() {
    $cardName = $(this).attr("name");
    $cardId = $(this).attr("id");
    $occurances = 0;
    for (var i = 0; i < deck.length; i++) {
      if (deck[i] == $cardName) {
        $occurances++;
      }
    }
      //if there are less than 2 of this card in deck array
    if ($occurances < 2) {
      //add the card to array
      deck.push($cardName);
      cardIds.push($cardId);
      deck.sort();
      console.log(deck);
      //empty the decklist div
      $(".decklist").empty();
      //go through all the cards in the deck array.
      //if that card appears once append it else replace it
      alert(deck.length);
      for (var i = 0; i < deck.length; i++) {
        //count the number of times this card is in the deck array
        $count = 1;
        for (var k = i + 1; k < deck.length; k++) {
          if (deck[k] == deck[i]) {
            $count++;
            i++; // Skip the item just matched as well
          }
        }
        alert($count);
        if ($count == 1) {
          //this runs once
          var $toBeAppended = $("<div class='deckItem' id='card" + cardIds[i] + "'>" + deck[i] + "</div>");
          $(".decklist").append($toBeAppended);
        } else if ($count == 2) {
          //this runs twice
          var $replacement = $("<div class='deckItem' id='" + cardIds[i] + "'>" + deck[i] + " x2</div>");
          $(".decklist").remove(".deckItem#" + cardIds[i]);
          $(".decklist").append($replacement);
        }
      }
    }
  });
});

JSFiddle: https://jsfiddle.net/TrueBlueAussie/mpcbLgtt/3/