单击轮播时，如何将指示器列表项更改为活动状态？

Question

我有一个通过JavaScript生成的Bootstrap 4轮播。我已经能够为索引中的每个li项目成功创建一个可点击的指示器，该指示器具有从json生成的文本。当我通过单击下一个或上一个在轮播中循环时，我能够使列表项正确更改为list-group-item active状态（并将所有其他项更改回list-group-item）。但是，当我单击指示器时，它们变为活动状态，但是单击每个指示器时我无法使其切换回非活动状态。这是我的代码：

  $indicators
    .appendTo($quiz);

  $.each(questions, function(question_index, question) {
    $('<li>')
      .attr('class', 'list-group-item')
      .html(question.prompt)
      .attr('class', question_index ? "" : "list-group-item")
      .click(function() { 
$quiz.carousel($(this).index());
     $(this).toggleClass('list-group-item active');
            })
      .appendTo($indicators);
  });

有人可以帮助吗？预先谢谢你。