Question

我在做什么：一个函数，当点击类卡的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张卡，而不是将卡附加到“套牌列表”中。 div，我想删除以前的卡并添加一张新卡，其中包含＆＃34; x2＆＃34;在它上面。

此刻的代码可以删除以前的卡。但是，当它附加以下代码时，它会执行两次。例如。我点击一张名为＆＃34;恐龙＆＃34;它会将它附加到数组中。然后，如果我点击卡片＆＃34;恐龙＆＃34;然后它将输出＆＃34;恐龙x2＆＃34; ＆＃34;恐龙x2＆＃34;而不只是＆＃34;恐龙x2＆＃34;

$(".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值，这是无效的HTML，浏览器只会找到第一个匹配项。我在较低的卡ID中添加了<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="app.js" type="text/javascript"></script> <body ng-app="myApp"> <div w3-test-directive></div> </body> </html>前缀，并对顶部卡card进行了唯一编号。

代码：

1-3

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

Answer 2

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

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

你的计数应该在过去的事件中更加简洁，你可以制作一个阵列，并在第一次出现之后将卡放在那里，并在计数之前检查卡是否已添加到阵列中。

Else语句运行两次jQuery

2 个答案: