jquery - 是否可以动态更改 Bootstrap 模态 ID？

Question

我的 Twig 循环正在生成引导卡。在每张卡片中都有一个按钮 (#modal1) 用于打开模式。我的问题是，当我在屏幕上有 2 张或更多卡片时，我无法获得这些卡片的社区 ID，因为 modal#1 总是会给我第一张卡片的 ID。

JS/Jquery 是否可以更改 id = "modal1" 和 data-target="#modal1" 以使其对应于每张卡片？

谢谢。

<div class="row rowcards">
  {% for community in data %}
  <div class="col-md-3 removable">
    <div class="card" id="{{community.id}}"> 
      <div class="card-body">
        <a href="#" id="threedot" class="btn dropdown-toggle" datatoggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></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" data-toggle="modal" data-target="#modal1"><i class="fas fa-user-plus"></i> {{ 'Add member' | trans }}</button>
        </div>
      </div>
    </div>
    <div data-id="{{community.id}}" class="modifyForm">
      <div class="form-group">
        <small class="form-text text-muted text-center">{{ 'Change Community' | trans }}</small>
        <input data-id="{{community.id}}" maxlength="30" type="text" class="form-control" name="changename" required />
      </div>
      <button type="submit" data-id="{{community.id}}" class="btn btn-primary changecommunity">{{ 'Validate' | trans }}</button>
      <button type="submit" data-id="{{community.id}}" class="btn btn-danger toggleback">Annuler</button>
    </div>
  </div>
  {% endfor %}

模态：

<!-- Modal add member -->
{% for community in data %}
<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content" id="{{community.id}}">
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h5 class="text-primary">Ajouter une personne à votre communauté</h5>
            <div class="form-group">
              <label for="create-givenname">{{ "Given name" | trans }}</label>
              <input name="givenName" type="text" class="form-control" id="create-givenname" aria-describedby="givennameHelp"
               placeholder="{{ "Given name" | trans }}"> 
            </div> 
            <div class="form-group">
              <label for="create-familyname">{{ "Family name" | trans }}</label>
              <input name="familyName" type="text" class="form-control" id="create-familyname" aria-describedby="familynameHelp"
               placeholder="{{ "Family name" | trans }}">
            </div>
            <div class="form-group">
              <label for="create-email">{{ "Email address" | trans }}</label>
              <input name="email" type="email" class="form-control" id="create-email" aria-describedby="emailHelp"
               placeholder="{{ "Email address" | trans }}">
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" data-id="{{community.id}}" class="btn btn-primary addmember" data-dismiss="modal">Valider</button>
          </div>
        </div>
      </div>
    </div>
   {% endfor %}

标签： jquerytwitter-bootstraptwig

Answer 1

您可以使用 jquery 更改 ID。但我不知道如何获得新的 id 值。你必须这样做。

$('.btn-card').click(function() {
    $('.modal').attr('id', newId);
    var Id = $('.modal').attr('id');
    $('#modal' + Id).modal('toggle');
});