python - 仅为一个按钮打开文本，而不是为所有按钮打开文本

Question

我在模板中使用 Bootstrap 折叠和循环来显示数据

{% 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 和目标 div 添加 id。

通过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>