Question

我正在使用myproject/并在模板中循环显示数据

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 »</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 %}即可正确操作

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>

仅打开一个按钮而不是全部打开文本

1 个答案: