點擊切換動畫

Question

我想添加一個jQuery的切換效果，我的代碼在我的Javascript中有HTML。有什麼建議？

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