切换课程以显示卡片

时间：2018-03-23 18:54:17

标签： javascript jquery event-listener

我正在用JavaScript编写记忆游戏。 我正处于我应该添加toggleClass的步骤，因此当点击卡片时，它们将被显示。我被告知我应该用event.target来解决这个问题。当我点击显示卡片时，但是在小图标中，而不是在它们所属的框中。有人能帮我理解我做错了吗？

＆＃13;
＆＃13; 
/*
 * Create a list that holds all of your cards
 */


/*
 * Display the cards on the page
 *   - shuffle the list of cards using the provided "shuffle" method below
 *   - loop through each card and create its HTML
 *   - add each card's HTML to the page
 */

// Shuffle function from http://stackoverflow.com/a/2450976

var myCard = ["fa fa-diamond", "fa fa-paper-plane-o", "fa fa-anchor", "fa fa-bolt", "fa fa-cube", "fa fa-leaf", "fa fa-bicycle", "fa fa-bomb"];



myCard.forEach(function(item) {
  var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  document.getElementById("myUL").appendChild(li);
});

  function shuffle(myCard) {
    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 myCard;
}
function handler(event) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
/*$(document).ready(function() {
    $("li").click(function(event) {
      $target = $(event.target);
      $target.toggleClass("card");
    });
  });



/*
/*
 * set up the event listener for a card. If a card is clicked:
 *  - display the card's symbol (put this functionality in another function that you call from this one)
 *  - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
 *  - if the list already has another card, check to see if the two cards match
 *    + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
 *    + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
 *    + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
 *    + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
 */
＆＃13; 
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
    font-family: 'Coda', cursive;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/*
 * Styles for the deck of cards
 */

.deck {
    width: 660px;
    min-height: 680px;
    background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
    padding: 32px;
    border-radius: 10px;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 125px;
    width: 125px;
    background: #2e3d49;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(0);
    background: #02b3e4;
    cursor: default;
}

.deck .card.show {
    font-size: 33px;
}

.deck .card.match {
    cursor: default;
    background: #02ccba;
    font-size: 33px;
}

/*
 * Styles for the Score Panel
 */

.score-panel {
    text-align: left;
    width: 345px;
    margin-bottom: 10px;
}

.score-panel .stars {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

.score-panel .stars li {
    list-style: none;
    display: inline-block;
}

.score-panel .restart {
    float: right;
    cursor: pointer;
}
＆＃13; 
<ul class="deck">
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card match">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>
            <li class="card match">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card open show">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>
        </ul>
    </div>
    <ul id="myUL">
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

在您注释掉的点击处理程序中，您使用的是event.target，它是纯JavaScript。最好使用“this”对象来识别被单击的元素。还有语法错误和一些不必要的东西。尝试替换为：

$(document).ready(function() {
  $("li").click(function() {
    $(this).toggleClass("card");
  });
});

答案 1 :(得分：0)

enter image description here点击卡片时，它们以小图标显示，而不是显示在右侧框中2

答案 2 :(得分：0)

将.deck注册到click事件。注意：第二个参数 .card 

$('.deck').on('click', '.card', handler)

处理程序＆＃34;知道＆＃34;由于上面提到的第二个参数，任何.card都是e.target和this。 toggleClass() .open和.show类不 .card .card。必须维护.open样式，.show和function handler(event) { $(this).toggleClass('open show'); }; 类负责动画，第二个＆＃34;状态＆＃34; （第一个状态是面朝下，第二个状态是面朝上）。

transform

我也在CSS中添加了动画。如果您使用transition使用/* * Create a list that holds all of your cards */ /* * Display the cards on the page * - shuffle the list of cards using the provided "shuffle" method below * - loop through each card and create its HTML * - add each card's HTML to the page */ // Shuffle function from http://stackoverflow.com/a/2450976 var myCard = ["fa fa-diamond", "fa fa-paper-plane-o", "fa fa-anchor", "fa fa-bolt", "fa fa-cube", "fa fa-leaf", "fa fa-bicycle", "fa fa-bomb"]; myCard.forEach(function(item) { var li = document.createElement("li"); var text = document.createTextNode(item); li.appendChild(text); document.getElementById("myUL").appendChild(li); }); function shuffle(myCard) { 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 myCard; } /* Register the .deck to the click event */ // Note: the second parameter .card $('.deck').on('click', '.card', handler) /* The handler "knows" that any .card is e.target and this */ // toggleClass the .open and .show classes function handler(event) { $(this).toggleClass('open show'); }; /*$(document).ready(function() { $("li").click(function(event) { $target = $(event.target); $target.toggleClass("card"); }); }); /* /* * set up the event listener for a card. If a card is clicked: * - display the card's symbol (put this functionality in another function that you call from this one) * - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one) * - if the list already has another card, check to see if the two cards match * + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one) * + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one) * + increment the move counter and display it on the page (put this functionality in another function that you call from this one) * + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one) */为其设置动画。

演示

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff url('../img/geometry2.png');
  /* Background pattern from Subtle Patterns */
  font-family: 'Coda', cursive;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}


/*
 * Styles for the deck of cards
 */

.deck {
  width: 660px;
  min-height: 680px;
  background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
  padding: 32px;
  border-radius: 10px;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 3em;
}

.deck .card {
  height: 125px;
  width: 125px;
  background: #2e3d49;
  font-size: 0;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
  /* This is animation for a card going to default state */
  transform: rotateY(0deg);
  transition: 1s ease;
}

.deck .card.open {
  background: #02b3e4;
  cursor: default;
  /* This is animation for a card when coming from default */
  transform: rotateY(180deg);
  transition: 1s ease;
}

.deck .card.show {
  font-size: 33px;
}

.deck .card.match {
  cursor: default;
  background: #02ccba;
  font-size: 33px;
}


/*
 * Styles for the Score Panel
 */

.score-panel {
  text-align: left;
  width: 345px;
  margin-bottom: 10px;
}

.score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
}

.score-panel .stars li {
  list-style: none;
  display: inline-block;
}

.score-panel .restart {
  float: right;
  cursor: pointer;
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
  <li class="card match">
    <i class="fa fa-anchor"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card">
    <i class="fa fa-leaf"></i>
  </li>
  <li class="card">
    <i class="fa fa-bomb"></i>
  </li>
  <li class="card open show">
    <i class="fa fa-bolt"></i>
  </li>
  <li class="card">
    <i class="fa fa-bicycle"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card">
    <i class="fa fa-cube"></i>
  </li>
</ul>

<ul id="myUL">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13; 
collection.update
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

早上好:)我设法在这里帮助显示卡片后，我被告知代码不够，这不是解决这个游戏的方式。 我采取了不同的方法，昨天我整天都试图让卡显示，但不幸的是我再次陷入同样的​​问题，但现在有更复杂的代码。我理解我的代码的每一部分，但不知道哪里可能是问题。 我试图用一个函数或两个单独的函数创建一张卡并为每张卡创建HTML，因为我认为问题出现在那里，但我有同样的问题。 演出卡的代码看起来很简单，不确定还有什么可以丢失。任何帮助都将不胜感激 谢谢

＆＃13;
＆＃13; 
/*
 * Create a list that holds all of your cards
 */


/*
 * Display the cards on the page
 *   - shuffle the list of cards using the provided "shuffle" method below
 *   - loop through each card and create its HTML
 *   - add each card's HTML to the page
 */

//array list that holds all the cards
let myCard = ["fa fa-diamond", "fa fa-paper-plane-o", "fa fa-anchor", "fa fa-bolt", "fa fa-cube", "fa fa-leaf", "fa fa-bicycle", "fa fa-bomb"];

//set lets
let openCard = []; //checks if open card is matching
let moves = 0; //number of moves
let matchingCard = 0; //matches found
let startGame = false; //checks when first card is open;
let rating = "3"; //rating give

 var timer = new Timer();
timer.addEventListener("secondsUpdated", function (e) {                   
$("#timer").html(timer.getTimeValues().toString());
});

//creates each cards HTML and generate random cards
//function createCard() {
  //let myCard = shuffle(myCard);
  //myCard.forEach(function(card) {
    //$(".deck").append(`<li class="card"><i class="fa ${card}"></i></li>`)})}
function createCard(card) {
    $('.deck').append(`<li class="card"><i class="fa ${card}"></i></li>`);
}
function generateCards() {
    for (var i = 0; i < 2; i++) {
        myCard = shuffle(myCard);
        myCard.forEach(createCard);
    }
}

// Shuffle function from http://stackoverflow.com/a/2450976
  function shuffle(myCard) {
    let 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 myCard;
}

//$(".deck").on("click", ".card", handler)
//function handler(event) {
	//$(this).toggleClass("open show")};

// make cards show 
function toggleCard() {
    
    // start the timer when first card is opened
    if (startGame == false) {
        startGame = true;
        timer.start();
    }
    
    if (openCard.length === 0) {
        $(this).toggleClass("show open").animateCss('flipInY');
        openCard.push($(this));
        disableCLick();
    }
    else if (openCard.length === 1) {
        // increment moves
        updateMoves();
        $(this).toggleClass("show open").animateCss('flipInY');
        openCard.push($(this));
        setTimeout(matchOpenCard, 1100);
    }
}
// Disable click of the open Cards
function disableCLick() {
    openCard.forEach(function (card) {
        card.off('click');
    });
}
// enable click on the open card
function enableClick() {
    openCard[0].click(toggleCard);
}

/*
/*
 * set up the event listener for a card. If a card is clicked:
 *  - display the card's symbol (put this functionality in another function that you call from this one)
 *  - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
 *  - if the list already has another card, check to see if the two cards match
 *    + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
 *    + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
 *    + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
 *    + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
 */
＆＃13; 
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
    font-family: 'Coda', cursive;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/*
 * Styles for the deck of cards
 */

.deck {
    width: 660px;
    min-height: 680px;
    background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
    padding: 32px;
    border-radius: 10px;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 125px;
    width: 125px;
    background: #2e3d49;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(0);
    background: #02b3e4;
    cursor: default;
}

.deck .card.show {
    font-size: 33px;
}

.deck .card.match {
    cursor: default;
    background: #02ccba;
    font-size: 33px;
}

/*
 * Styles for the Score Panel
 */

.score-panel {
    text-align: left;
    width: 345px;
    margin-bottom: 10px;
}

.score-panel .stars {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

.score-panel .stars li {
    list-style: none;
    display: inline-block;
}

.score-panel .restart {
    float: right;
    cursor: pointer;
}
＆＃13; 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <meta name="description" content="">
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

    <div class="container">
        <header>
            <h1>Matching Game</h1>
        </header>

        <section class="score-panel">
        	<ul class="stars">
        		<li><i class="fa fa-star"></i></li>
        		<li><i class="fa fa-star"></i></li>
        		<li><i class="fa fa-star"></i></li>
        	</ul>
            <span class="moves">3 Moves</span> </br> 
            <span class="timer" id="timer">00:00:00</span>
            <div class="restart">
        		<i class="fa fa-repeat"></i>
        	</div>
        </section>

        <ul class="deck">
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card match">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>
            <li class="card match">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card open show">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/dist/easytimer.min.js"></script>
    <script src="js/app.js"></script>
    <script>
    var timerInstance = new Timer();
    </script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题