Question

我目前正在制作记忆游戏，奇怪的是，每当我尝试获取cardClicked类中的元素数量的长度时，它都不会返回除0以外的任何内容。我认为它必须做当它正在搜索类时，以及元素添加了类时。有一个类似的帖子，但据我所知，答案并不适用。谢谢。目标是 1.单击元素 2.添加了cardClicked类 3.它搜索该类的元素数量 4.退还金额 5.当它达到两个时，我有另一个我想要使用的功能，但我不能超过0。

Answer 1

您正在检查之前关闭点击处理程序

$('.card').click(function(){
  $(this).find("span").toggleClass( "cardText" );
  $(this).toggleClass( "cardClicked" );
  console.log(clicked);
  var clicked = document.getElementsByClassName('cardClicked');
  var amount = clicked.length;
  console.log(amount);
  if(amount == 2){
    console.log('good');
  }
});

现在你要检查长度是否为2

Answer 2

为每次点击制作第二个听众。这样您就可以更新每次点击的值。在这个监听器中，您可以使用游戏逻辑来验证它们是否相同

$('.card').click(function() {
    var clicked = document.getElementsByClassName('cardClicked');
    var amount = clicked.length;
    console.log(amount);
    if (amount == 2) {
      console.log('good');
    }
  });

希望这会有所帮助：）

$(document).ready(function() {
  var items = [
    "Potato",
    "Tomato",
    "Strawberry",
    "Pencil",
    "Blueberry",
    "Raspberry",
    "Lettuce",
    "Steak"
  ];

  items = shuffle(items)
  //console.log(items);

  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    while (currentIndex !== 0) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array;
  }

  for (i = 0; i < items.length; i++) {
    $('<div class="card"/>').html('<span class="cardText">' + items[i] + '</span>').appendTo('.board');
  };

  items = shuffle(items);

  for (i = 0; i < items.length; i++) {
    $('<div class="card"/>').html('<span class="cardText">' + items[i] + '</span>').appendTo('.board');
  };


  $('.card').click(function() {
    $(this).find("span").toggleClass("cardText");
    $(this).toggleClass("cardClicked");
  });

  $('.card').click(function() {
    var clicked = document.getElementsByClassName('cardClicked');
    var amount = clicked.length;
    console.log(amount);
    if (amount == 2) {
      console.log('good');
    }
  });
});

.board {
  height: 630px;
  width: 630px;
  background-color: #DAD6D6;
  border-radius: 5px;
  left: 50%;
  margin-left: -315px;
  position: relative;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.row {
  width: 100%;
  height: 157.5px;
}

.card {
  width: 125px;
  height: 125px;
  display: inline-block;
  margin: 14.5px;
  border-radius: 5px;
  background-color: #B6455F;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-align: center;
  vertical-align: top
}

.cardText {
  display: none;
}

.cardClicked {}

.notHidden {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="game.js"></script>
  <link href="game.css" rel="stylesheet">
  <title>title</title>
</head>

<body>
  <div class="board">

  </div>
</body>

</html>

Answer 3

JS部分document.getElementsByClassName('cardClicked');不在click事件监听器内。

修正：https://jsfiddle.net/o0xmcapx/55/

顺便问一下，为什么要将纯JS与jQuery混合使用？而不是jquery函数内的document.getElementByClassName，继续使用jQuery选择器$('.cardClicked')

Answer 4

看起来你在点击处理程序之外工作了。

$('.card').click(function(){
  $(this).find("span").toggleClass( "cardText" );
    $(this).toggleClass( "cardClicked" );
    console.log(clicked);

    var clicked = document.getElementsByClassName('cardClicked');
    var amount = clicked.length;
    console.log(amount);
    if(amount == 2){
        console.log('good');
    }
  });
});

获取使用类计算元素的变量的长度，但不起作用

4 个答案: