单击切换动画

Question

我想在我的Javascript中包含HTML的代码中添加jquery切换效果。有什么建议吗？

    GuessGame.prototype.createBoard = function(){
  var html = '';
  Object.keys(this.cards).forEach(function(key) {
      html += '<div class="card" id="' + key + '"';
      html += ` style='background-image: url(img/${key}.jpg)'`;
      html += '>'
      html += '<div class="front" ';
      html += 'id="' + key + '">';
      html += '</div>';
    html += '</div>';
  });
  // Add all the divs to the HTML
  document.getElementById('board').innerHTML = html;

Answer 1

在你的例子中，你并没有真正使用jQuery的强大功能。 这是一种更好的方法。

GuessGame.prototype.createBoard = function(){
  var board = $('#board');
  Object.keys(this.cards).forEach(function(key) {
      var card = $('<div class="card" id="' + key + '" style="background-image: url(img/${key}.jpg)"><div class="front"></div></div>');
      // add onClick Event
      card.on('click', function(e) {
          card.toggleClass('toggled-class');
      });
      // append card to board
      board.append(card);
  });