当严格比较存储在数组中的两个相等值时，输出如何不返回相等？

时间：2016-02-20 01:17:33

标签： javascript jquery css

我正在创建数组clickedBoxesArray并在每次点击时将类名传递给它。然后我比较那些类名。当我刚刚点击的元素的类名与我之前点击的项的类名匹配时，我想要为这些元素添加类。

当clickedBoxesArray[clickedBoxesCounter]处的对象的值与clickedBoxesArray[prevClickedBoxCounter]相同时，if语句不会触发。但是，如果这两个位置的值为Undefined，则if语句将两个值评估为相等，并根据需要更改类。如果值是未定义的，那么为什么语句会起作用，但如果值是相同的类列表则不会，

JS / JQuery的：

$(document).ready(function(){
  "use strict";

  //this function populates the game body with a user selected # of cards
  $(".submit").on("click", function(){
    var boxAmt = 2 * Math.round(parseInt($(".boxNum").val())/2);
    for (var b = 1; b <= boxAmt; b++){
      $(".game-body").append("<span class='card'><i class='fa fa-heart fa-4x'></i></span>");
      // $(".game-body").append("<span class='card'><i class='fa " + iconChoices[Math.floor(Math.random()*(200-0+1))+0] + " fa-4x'></i></span>");
      };
    if(boxAmt%5 === 0){
      $(".game-body").css({marginLeft : "20%", marginRight : "20%"});
    }//closes %5 if/else
    else if(boxAmt%4 === 0){
      $(".game-body").css({marginLeft : "28%", marginRight : "20%"});
    }
  });

  //this function flips cards
  $(".game-body").on("click", ".card", function(){
    $(this).addClass("fliparoo");
    $(this.children).addClass("game-icon");
  });

  //this function counts clicks and matches cards
  var count = 0;
  var clickedBoxesArray = []

  $(".game-body").click(function(){
     count+=1;
     function logClicksCurrent(input){
       clickedBoxesArray.push(input);
     }
     logClicksCurrent($(".game-body").find(".fliparoo").children()[count -1]);
     var clickedBoxesCounter = clickedBoxesArray.length-1;
     var prevClickedBoxCounter = clickedBoxesArray.length-2
      console.log(clickedBoxesArray[clickedBoxesCounter]);
      console.log(clickedBoxesArray[prevClickedBoxCounter]);
      console.log(clickedBoxesArray)

    if(count%2 === 0 && clickedBoxesArray[clickedBoxesCounter] === clickedBoxesArray[prevClickedBoxCounter]){
      $(".game-body").find(".fliparoo").addClass("match-card");
      $(".game-body").find(".fliparoo").addClass("match-icon");
    }
  });

HTML：

 <!DOCTYPE html>
    <html>
      <head>
        <title>MEMORY | easy mode</title>
        <link href="./assets/css/reset.css" rel="stylesheet">
        <link href="./assets/css/style.css" rel="stylesheet">
        <link href="./assets/css/animations.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      </head>
      <body>
        <audio src="./assets/audio/got-theme.mp3"></audio>
        <div id="entrance-animation" class="fadeIn">
        <header>
            <div class="header">
              <div class="memory-name">
                <span>Mem</span><i class="fa fa-lightbulb-o"></i>    <span>ry</p>
              </div>
          </div>

             <!-- class="heart-row">
               <i class="fa fa-heart"></i>
               <i class="fa fa-heart"></i>
               <i class="fa fa-heart"></i>
               <i class="fa fa-heart"></i>
               <i class="fa fa-heart-o"></i>
               <i class="fa fa-heart-o"></i>
          </ul> -->

          <span class="timer"></span>


        </header>

      <div class="enter-boxes">HOW MANY BOXES DO YOU WANT?</div>
        <input type="text" value="" class="boxNum">

        <input class="submit" type="submit" value="gimme boxes">



        <section class="game-body group">

        </section>
      </main>

        <footer>
          <nav>
            <a href="new-game.html"><div class="return-to-menu">Back to menu</div></a>
          </nav>
        </footer>
      </div>

      <script src="./assets/js/scripts.js"></script>
      </body>
</html>

CSS：

/*********************************************************
element and cross-page styling
**********************************************************/
*{
  box-sizing: border-box;
}

body {
  background: blue;
  font-family: 'Orbitron', sans-serif;
  color: white
}

a {
  text-decoration: none;
  color: white;
}



.memory-name {
  text-align: justify;
  font-family: 'Orbitron', sans-serif;
  color: white;
  font-size: 4em;
}


/*********************************************************
new-game page styling
**********************************************************/

.choice-menu {
  display: inline-block;
  margin: 10% 0 0 40%;
}


.new-game-text {
  display: inline-block;
  margin: 0 0 0 40px;
  padding: 40px 0 0 0;
  text-align: center;
  font-size: 2em;
}

.easy-mode-box {
  text-align: center;
  font-size: 2em;
  border: 2px solid white;
  margin: 50px 0 0 20px;
  padding: 10px 0;
  background: blue;
  transform: perspective(200px) rotateY(-15deg)
}

.hard-mode-box {
  text-align: center;
  font-size: 2em;
  border: 2px solid white;
  margin: 20px 0 0 20px;
  padding: 10px 0;
  background: blue;
  transform: perspective(200px) rotateY(15deg)
  /*add transform here*/
}

.easy-mode-box:hover {
  -webkit-transition-property: background;
  background: paleturquoise;
}

.hard-mode-box:hover {
  -webkit-transition-property: background;
  background: turquoise;
}


/*********************************************************
easy mode page styling (index.html)
**********************************************************/

/****header****/

.easy-mode-header {
  display: block;
  margin: 0 0 0 40%;
}

.heart-row {
  display: inline-block;
  margin: 0 0 0 16%;
}

.timer {
  float: right;
  margin: 0 16% 0 0;
}

/****game body****/


.game-body {
  margin: 5% 15%;
  position: relative;
  /*margin: auto;*/
}

.game-body span {
  position: relative;
  float: left;
  overflow: hidden;
}

.card {
  width: 10em;
  height: 10em;
  background: steelblue;
  display: block;
  transition: background 1s, -webkit-transform 1s;
  border-radius: .4em;
  border: 1px solid darkblue;
  margin: 3px;
  color: rgba(255,255,255,0);
  text-align: center;
  padding-top: 5%;
}

.card:hover {
  box-shadow: 2px 2px 2px 2px darkblue;
}

/****click transitions****/

.fliparoo {
  background: powderblue;
  -webkit-transform: rotateY(180deg);
}

.game-icon {
  color:rgba(255,255,255,1);
  transition-delay: .5s;
}

.match-card{
  background: limegreen;
}

.match-icon{
  color:rgba(200,200,200,1);
}

/*********************************************************
footer
**********************************************************/


.return-to-menu {
  display: inline-block;
  text-align: center;
  font-size: 2em;
  /*border: 2px solid white;*/
  margin: 50px 0 20px 42%;
  padding: 10px 10px 5px 10px;
  background: blue;
  border-radius: .3em;
}

.enter-boxes {
  display: block;

  font-size: 1em;
  /*border: 2px solid white;*/

  background: blue;
  border-radius: .3em;
}

.return-to-menu:hover {
  -webkit-transition-property: background;
  background: cornflowerblue;
  box-shadow: 2px 2px 2px 2px steelblue;


}


/*********************************************************
clearfix (experimental-prolly not relevant)
**********************************************************/


.group:after {
  content: "";
  display: table;
  clear: both;
}


/*********************************************************
media queries
**********************************************************/

@media (max-width: 1420px) {
  .game-body{
    width: 2000px;
  }
}

@media (min-width: 1620px) {
  .margin-fix {
    margin: 2% 0 0 15%;
  }
}

@media (min-width: 1620px) {
  .margin-fix-2 {
    margin: 2% 0 0 23%;
  }
}

0 个答案:

没有答案
相关问题
最新问题