javascript - 为什么我的按钮在附加时会重复？

Question

我的按钮应该只为它找到的每个单词附加一次，但不知何故它附加了不止一次。我不知道是什么导致了这种情况发生，因此我发布了更多的代码，然后只是按钮部分和附加部分。我认为在我追加之前出了什么问题？这里有一张图片，看看它的外观:如您所见，4 个字...但是 10 个左右的按钮，而它应该是 4 个。

function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
exercises.forEach(function(exercise) {
var exer = $('<div/>', {
    'class': 'row'
  })
  .append(
    $('<div/>', {
      'class': 'col-md-3'
    })
    .append(
      $('<div/>', {
        'class': 'row'
      })
      .append($('<div>', {
        class: 'col-md-3 testforbutton',
       // text: "(button here)"
      }))
      .append($('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries
        text: exercise.word
      }))
    )
  ).append(
    $('<div>', {
      class: 'col-md-9',
      text: "(4 x col-3 here)"
    })
  );

$("#exerciseField").append(exer);
ID123++;
$('.testforbutton').append(getAudioForWords());
});
}

createExercise(fakejson);


function getAudioForWords() {
    var audioBtn = $('<button/>', {
    'class': 'btn btn-primary fa fa-volume-up sound'
   });
   return audioBtn;
 }

Answer 1

从代码来看，exercises 的每次迭代都会向所有现有的 testforbutton 元素添加一个按钮，复制先前添加的行中的按钮。

只需限制您的选择器在当前 exer 元素中搜索 testforbutton 元素

exer.find('.testforbutton').append(getAudioForWords());