javascript - 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 张这张卡，那么它应该不执行任何操作。

如果没有任何卡牌，则会将一个牌组项 div append 到牌组列表 div 上。

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

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

目前的代码可以删除之前的卡片。但是，当它 append 以下代码时，它会执行两次。例如。我单击一张名为“恐龙”的卡片，它会将其 append 到数组中。然后，如果我再次单击“恐龙”卡，它将输出“恐龙 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

你实际上有很多问题。

• 您对每张卡片的计数不排除已匹配的重复卡片
• 页面中有重复的 ID 值，该 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/