クリックしてアニメーションを切り替える

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); 
    });