时间戳

首页 > 解决方案 > 尝试使用具有相似类名 Javascript 和 HTML 的相同函数

javascript - 尝试使用具有相似类名 Javascript 和 HTML 的相同函数

问题描述

你好我知道你不能有类似的ID标签，因为会有一个控制台错误，但在我的场景中，我试图有一个模式显示，其中包含不同的信息，类似的按钮被点击了相同的类名

例如

   <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

谢谢你

标签： javascripthtmlmodal-dialog

解决方案

$(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>

代码将选择 data-whatever 的值并将其放入 modalOutput。

推荐阅读