Можно ли динамически изменить модальный идентификатор Bootstrap?

Question

Мой цикл Twig создает карты Bootstrap.В каждой карточке есть кнопка (# modal1), чтобы открыть модал.Моя проблема в том, что когда у меня есть 2 или более карт на экране, я не могу получить идентификатор сообщества этих карт, так как модальный # 1 всегда будет давать мне идентификатор первой.

Возможно ли это с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 %}

Answer 1

Вы можете изменить Id с помощью jquery.Но я не знаю, как получить новое значение идентификатора.Вы должны это сделать.

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

Answer 2

ОБНОВЛЕНИЕ: после комментария от спрашивающего ... Когда вы создаете / генерируете новые карточки, убедитесь, что

1. Модальные сгенерированы с

   • modal1 в качестве идентификатора для div
   • modalToggle в качестве идентификатора для кнопки
   • , например: <div id="modal1"> <button id='modalToggle' >'Add member' </button> </div>

2. Мы просто вызываем нашу функцию afterCreatingNewCard сразу после генерирования карты, это гарантирует, что идентификаторы по умолчанию ('modal1' и 'moddleToggle') будут заменены на порядковый номер

3. Iобновил код для вашего конкретного случая - сообщите мне, если есть какие-либо вопросы

jquery attr может помочь в этом ... проверьте ниже

$(document).ready(function() {
  var currentRunningNumber = 1;
  
  yourLogicForCreatingACard(){
  //your normal logic will go here
  afterCreatingNewCard();
  }

  afterCreatingNewCard(){
    var newRunningNumber = currentRunningNumber + 1;
    var newModalName = "modal"+newRunningNumber;
    var newModalToggleName = "#modal"+newRunningNumber;
    
    $("#modal1").attr("id", newModalName);
    $("#modalToggle").attr("data-target", newModalToggleName);
    currentRunningNumber = newRunningNumber;
  }
 
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <button id='modalToggle' class="btn btn-primary btn-card" data-toggle="modal" data-target="#modal1">'Add member' </button>
</div>