试图展示下与jQuery动态生成的内容输入

问题描述 投票:0回答:1

我想有从#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)
});
jquery twitter-bootstrap
1个回答
1
投票
  • 这是因为Id应该是唯一的,所以不要使用相同的ID为一个以上的元素..更改所有ids的任何环路classs
  • 然后你可以使用$(this).closest('.removable').find('.modifyForm').toggle(500)
© www.soinside.com 2019 - 2024. All rights reserved.