Javascript 一些公共元素上的模态重构

这些代码工作正常，但是一次又一次地重复，需要重构

页面上显示的元素是所有模态的标题和描述。休息 功能的定义是相同的。Css是默认的引导，它可以是相同的 没有任何重要的变化

我在每个主按钮的侧面添加了另一个帮助按钮，以提供帮助 搜索有关如何查找每个元素文档的信息 情态动词内部。目前没有必要关注这一点

Lorem ipsum文本，可以放在各自的容器上完成 描述和标题，您可以自己做

要测试代码，请链接页面上的Bootstrap 4.0 js文件

因此，这里有一些重构的指南，值得一提。多谢各位

<!-- DESCRIPTION & HELP BUTTONS-->
    <ul>
        <li><a href="#">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
                <button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
        </a></li>
</br>
        <li><a href="#">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-2" data-whatever="2. First Content">Title 2</button>
                <button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
        </a></li>
    </ul>
  </div>
</div>
<!-- END DESCRIPTION & HELP BUTTONS-->


<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Some text Description 1</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Go to content</button>
      </div>
    </div>
  </div>
</div>

<!-- END MODAL's BODY DESCRIPTION-->

<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Title 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Some text Description 2</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Go to content</button>
      </div>
    </div>
  </div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->

$('#example-1').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever')
  } // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(recipient)
  modal.find('.modal-body p').text(recipient)
})

$('#example-2').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever')
  } // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text(recipient)
  modal.find('.modal-body p').text(recipient)
})

标题1
&时代；
一些文字说明1

关
进入内容
标题2
&时代；
一些文字说明2

关
进入内容
$（'#示例-1'）。on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
var recipient=button.data（'whatever'）
}//从数据中提取信息-*属性
//如有必要，您可以在这里启动AJAX请求（然后在回调中进行更新）。
//更新模式的内容。我们将在这里使用jQuery，但您可以使用数据绑定库或其他方法。
var modal=$（此）
modal.find（“.modal title”）.text（收件人）
modal.find（'.modal body p'）.text（收件人）
})
$（'#示例2'）。on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式
var recipient=button.data（'whatever'）
}//从数据中提取信息-*属性
//如有必要，您可以在这里启动AJAX请求（然后在回调中进行更新）。
//更新模式的内容。我们将在这里使用jQuery，但您可以使用数据绑定库或其他方法。
var modal=$（此）
modal.find（“.modal title”）.text（收件人）
modal.find（'.modal body p'）.text（收件人）
})

我创建了一个单一模式，在该模式中，可以根据单击的按钮替换信息。为了处理modal body part的较长文本，我添加了一个包含相关文本以及同一li中的按钮，但保持相同的隐藏。因此，点击modal lonk，所有相关的值都可以用jquery替换，如下所示

       <!-- DESCRIPTION & HELP BUTTONS-->
<ul>
    <li><a href="#">

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
        <button type="button" class="btn btn-secondary btn-circle" title="Information regarding first modal or...">?<i></i></button>
            <div id="1content" style="visibility: hidden;"> <p>Some text Description 1</p></div> 
    </a></li>

    <li><a href="#">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="2. Second Content">Title 2</button>
        <button type="button" class="btn btn-secondary btn-circle" title="Information regarding second modal or...">?<i></i></button>
        <div id="2content" style="visibility: hidden;"> <p>Some text Description 2</p></div> 
    </a></li>
</ul>

<!-- END DESCRIPTION & HELP BUTTONS-->


<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p></p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Go to content</button>
      </div>
    </div>
  </div>
</div>

<!-- END MODAL's BODY DESCRIPTION-->


<script>

$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
  var button = $(this); // Button that triggered the modal
  var recipient = $(this).attr("data-whatever");

  var modal = $("#example-1");
  modal.find('.modal-title').text(recipient);

  var div = $( "div" );
  // if last() is not used, then it brings that information button's ? as well
  var bodyText = $(this).siblings(div).last().text();
  modal.find('.modal-body p').text(bodyText);

});

</script>

标题1
&时代；

关
进入内容
$（'a[data toggle=modal]，按钮[data toggle=modal]'）。单击（函数（）{
var button=$（this）；//触发模式的按钮
var recipient=$（this.attr（“无论数据是什么”）；
var模态=$（“#示例-1”）；
modal.find（“.modal title”）.text（收件人）；
var div=$（“div”）；
//如果没有使用last（），那么它也会带来该信息按钮的
var bodyText=$（this.sibbines（div.last（）.text（））；
modal.find（'.modal body p'）.text（bodyText）；
});

谢谢您的回复。但这不是我要找的。