wählen Sie Text und ersetzen Sie in für Schleife

Question

Ich habe Probleme, dies zu lösen. Ich muss ein Raster mit quadratischen Emojis erstellen. 11 Quadrate über und 68 Reihen. Ich habe das geschaffen. Jetzt ist mein Problem, ein Quadrat in einer bestimmten Zeile und Position in der Zeile zu zielen und es durch ein anderes Emoji zu ersetzen. Die Klasse .emoji-generator ist ein Textarea-Element. Ich habe versucht, es anzuhängen und das scheint den Trick zu machen. aber ich muss das Quadrat durch ein anderes Emoji ersetzen und es der Linie nicht hinzufügen. In jeder Zeile können nur 11 Zeichen stehen. Was ist der beste Weg, um dies zu tun?

var SQUARE_EMOJI = '\u25FB\uFE0F '; 
var DROPLET_EMOJI = '\ud83d\udca7'; 

function reset() { 
    for (var i = 1; i<=68; i++) { 
     for(var y = 0; y <11; y++) { 
      $('.emoji-generator').append(SQUARE_EMOJI); 
      if (i == 6 && y == 5) { 
       $('.emoji-generator')[y].append(DROPLET_EMOJI); 
      } 
     } 
     $('.emoji-generator').append('\r\n'); 
    } 
}; 

Answer 1

textarea Elementgehalt wird durch das Verfahren append nicht manipuliert, die zum Einsetzen von Knoten bestimmt ist. Stattdessen sollten Sie die Methode val verwenden, um den Inhalt festzulegen. Und um die Leistung zu verbessern, ist es am besten, dies nur einmal am Ende Ihrer Funktion zu tun:

var SQUARE_EMOJI = '\u25FB\uFE0F '; 
var DROPLET_EMOJI = '\ud83d\udca7'; 

function reset() { 
    var content = ''; 
    for (var i = 1; i<=68; i++) { 
     for(var y = 0; y <11; y++) { 
      if (i == 6 && y == 5) { 
       content += DROPLET_EMOJI; 
      } else { 
       content += SQUARE_EMOJI; 
      } 
     } 
     content += '\n'; 
    } 
    $('.emoji-generator').val(content); 
};