Question

这些代码工作正常，但反复重复，需要重构。

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

我在每个主按钮的侧面添加了另一个帮助按钮，以提供帮助搜索有关如何查找每个元素的文档的一些信息在莫代尔内部。现在不需要关注它。

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

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

因此，在这里进行重构的一些指南将是apreciated。非常感谢你。

<!-- 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)
})

Answer 1

我创建了一个模态，可以根据点击它的按钮替换信息。为了处理模态身体部位的较长文本，我添加了一个包含相关文本以及相同li中的按钮但保持相同隐藏的文本。所以在单击模态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 个答案: