пытаясь использовать одну и ту же функцию с похожими именами классов Javascript и HTML - PullRequest
Новая
       6

пытаясь использовать одну и ту же функцию с похожими именами классов Javascript и HTML

0 голосов
/ 24 декабря 2018

привет, я знаю, что вы не можете иметь похожие идентификаторы из-за того, что будет консольная ошибка, но в моем сценарии я пытаюсь получить модальное отображение с различной информацией в нем, аналогичные кнопки нажимаются с помощью кнопкито же имя класса

, например, 

   <div class="source">
     <h1 data-target="2"></h1>
     <button class="showBtn">BTN</button>
   </div>

   <div class="source">
     <h1 data-target="3"></h1>
     <button class="showBtn">BTN</button>
   </div>

   <div class="modal hide">
     <div id="modalOuput"></div>
   </div>

JS (у меня уже есть модальное отображение, моя проблема состояла бы в том, чтобы модальное отображение с уникальными идентификаторами в модальном также отображалось, например)

     const modalOutput = document.querySelector('#modalOutput');
     const sourceData = document.querySelector('.source').getAttribute('data-target);

      modalOutput.textContent = sourceData

спасибо

1 Ответ

0 голосов
/ 24 декабря 2018 

$(document).ready(function(){
  $("#modalOutput").on('show.bs.modal', function(e){
    var button = $(e.relatedTarget);
    var dToPopulate = button.data('whatever');
    var modal = $(this);
    modal.find('.modal-body').html(dToPopulate);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="modalOutput" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body"><!-- data-whatever attribute of selected button--></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

  <div class="source">
     <h1></h1>
     <button data-whatever="2" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
   </div>

   <div class="source">
     <h1></h1>
     <button data-whatever="3" class="showBtn" data-toggle="modal" data-target="#modalOutput">BTN</button>
   </div>

Код выберет значение данных, что угодно, и поместит его в modalOutput.

...