只为一个按钮打开文本，而不是全部

Question

我使用bootstrap collapse 并在我的模板中循环显示数据

{% for text in imageTitles %}
  <div class="span4 collapse-group">
    <div class="text-center">
      <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check &raquo;</a></p>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        {{text}}
      </div>
    </div>
    <script>
      $('.btn').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        var $collapse = $this.closest('.collapse-group').find('.collapse');
        $collapse.collapse('toggle');
      });
    </script>
    {% endfor %}

当我按下按钮时，每个按钮的文本都会打开，但我只需要一个，如何正确编写函数$('.btn').on('click', function(e)以进行正确操作

Answer 1

使用{{ forloop.counter }} 为您的 btn 添加 id 和目标 div。

通过 btn 的 id 号找到你的目标 div。

此外，您不必循环所有脚本。一个人就够了。

这是一个例子。你应该自己更新。

{% for text in imageTitles %}
  <div class="span4 collapse-group">
    <div class="text-center">
      <p><a class="btn btn-md btn-outline-dark btn-square" href="#" id="{{ forloop.counter }}">Check &raquo;</a></p>
    </div>
    <div class="collapse" id="collapseExample" id="txt_{{ forloop.counter }}">
      <div class="card card-body">
        {{text}}
      </div>
    </div>
{% endfor %}
<script>
  $('.btn').on('click', function(e) {
    e.preventDefault();
    var num = $(this).attr('id');
    var $collapse = $("#txt_" + num);
    // var $this = $(this);
    // var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
  });
</script>