Question

我意识到已经有很多方法可以解决这个问题，但是在我的一生中，我找不到与我的问题类似的方法...。我改编了文档中的“公认”代码，以如下形式显示动态内容。

拔出头发，确保我只是在做一些愚蠢的事情。……

通话HTML

                                <div class="row">
                                    <?php $option=array_column($options, 'name', 'id');?>
                                    <div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div>
                                    <div class="col-7 col-md-6 col-lg-4">
                                        <a href="#" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">
                                            <?php echo $option[$vesseldata['Engine1Type']];?>
                                        </a>
                                    </div>
                                    <div class="col-5 col-md-6 col-lg-2>Engine 1 Serial</div><div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div>
                                </div>

然后，该脚本现在仅嵌入在页面中，以简化工作。

                <script>
                        $('#Engine2Modal').on('show.bs.modal', function (event) {
                          var trigger = $(event.relatedTarget); // Button that triggered the modal
                          var thing1 = trigger.data('thing1'); // Extract info from data-* attributes
                          var thing2 = trigger.data('thing2'); // 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(thing1 + '<br>Serial # ' + thing2);
                          });
                                      </script>

然后，模态html在这里

<div class="modal right fade in" id="Engine2Modal" tabindex="-1" role="dialog"  aria-labelledby="ModalLabel" aria-hidden="true">
    <form id="service_form"  method="get">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">New message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <label class="control-label col-xs-4 col-md-3" for="DesignRef">Design Reference</label>
                            <div class="col-xs-8  col-md-7">
                            <input type="text" class="form-control" name="DesignRef" id="DesignRef" placeholder="Design Reference" value=""/>
                            <?php if(!empty($registration_error['DesignRef'])) { ?>
                                    <br/>
                                    <div class="alert alert-danger" role="alert"><?php echo $registration_error['DesignRef']; ?></div>
                            <?php } ?>
                            </div>
                        </div>
                    </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

终于找到了……

找到了一篇文章，说明如果要解析HTML，文本方法实际上不是正确的方法。实际上，jQuery中有一个HTML方法...：-）

                        modal.find('.modal-title1').html(item);

有效。

具有多个变量的动态模式内容

1 个答案: