Question

我试图将#modifyForm的输入（默认情况下不显示）显示在单击链接修改的卡片下。目前，它仅在第一张卡片下方或所有卡片下方同时切换。任何帮助将不胜感激。

<div class="row rowcards">
           {% for community in data %}
          <div class="col-md-3" id="removable">
            <div class="card"> 
              <div class="card-body">
                <a href="#" id="threedot" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
                <!-- menu -->
                <div class="dropdown-menu">
                  <p class="text-center"><a href="#" class="modifylink">{{ 'Modifiy' | trans }}</a></p>
                  <p class="text-center"><a href="#" data-id="{{community.id}}" class="text-danger deletelink"><i class="fas fa-trash-alt"></i>{{ 'Delete' | trans }}</a></p>
                </div>
                <p class="card-title">{{ community.info.name }}</p>
                <p class="card-text"><i class="fas fa-users"></i> 4 membres</p>
                <div class="text-center"> 
                 <button class="btn btn-primary btn-card"><i class="fas fa-user-plus"></i> {{ 'Add member' | trans }}</button>
            </div>
          </div>
        </div>
        <form data-id="{{community.id}}" id="modifyForm">
          <div class="form-group modifyform">
            <small class="form-text text-muted">Changez le nom de votre communauté</small>
            <input type="text" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      {% endfor %}

jquery：

$(document).on('click', '.modifylink', function() { 
$('#removable #modifyForm').toggle(500)
});

Answer 1

这是因为Id应该是唯一的，所以不要对多个元素使用相同的id。.将任何循环中的所有id更改为class
然后您可以使用$(this).closest('.removable').find('.modifyForm').toggle(500)

尝试使用jQuery在动态生成的内容下显示输入

1 个答案: