PHP 循环中如何单独运行 Bootstrap 模态框的 jQuery 函数？

2024-03-16 18:28:52

在 PHP 循环中单独运行 Bootstrap 模态框的 jQuery 函数

当使用 PHP 循环在页面上生成多个模态框时，需要单独触发每个模态框的 jQuery 函数，以实现各自独特的行为。本文将深入探讨如何实现这一目标，解决困扰许多开发者的常见问题。

问题陈述

假设你有一个 PHP 循环，用于生成一个用户列表，并且每个用户都对应着一个 Bootstrap 模态框。当你选择模态框中的下拉菜单时，没有任何动作发生。你的目标是根据下拉菜单的值，在每个模态框中显示特定字段。此外，你还在模态框中使用 Select2 库创建了选择标记，但这些标记也无法正常工作。

解决方案

要解决此问题，需要遵循以下步骤：

1. 确保唯一的标识符

为每个模态框和相关的元素分配唯一的标识符至关重要。从代码中可以看出，模态框的 ID 都以 "test-" 和用户 ID 为前缀。此外，每个下拉菜单和表单的 ID 也应具有唯一的名称，如 "choices-user_id" 和 "new_test-user_id"。

2. 针对每个模态框编写 jQuery

在 jQuery 代码块中，使用 .each() 方法遍历每个用户，并为每个模态框附加事件监听器。

$(document).ready(function () {
    <?php foreach ($users as $user): ?>
    $('#choices-<?php echo $user->id; ?>').on('change', function (e) {
        e.preventDefault();
        const relatedOption = $('#choices-<?php echo $user->id; ?> option:selected').val();
        if (relatedOption !== '') {
            $('.relation_fields-<?php echo $user->id; ?>').slideDown();
        } else {
            $('.relation_fields-<?php echo $user->id; ?>').slideUp();
        }
        if (relatedOption === 'one') {
            $('#one_search-<?php echo $user->id; ?>').css('display', 'block');
        } else {
            $('#one_search-<?php echo $user->id; ?>').css('display', 'none');
        }
        if (relatedOption === 'two') {
            $('#two_search-<?php echo $user->id; ?>').css('display', 'block')
        } else {
            $('#two_search-<?php echo $user->id; ?>').css('display', 'none')
        }
        if (relatedOption === 'three') {
            $('#three_search-<?php echo $user->id; ?>').css('display', 'block');
        } else {
            $('#three_search-<?php echo $user->id; ?>').css('display', 'none');
        }
    });
    <?php endforeach; ?>
});

3. 使用唯一标识符选择元素

在 jQuery 代码中，使用唯一的标识符来选择模态框和相关的元素。确保 #choices-、.relation_fields-、#one_search- 以及其他元素的 ID 与 PHP 代码中的一致。

4. 初始化 Select2 库

对于每个模态框，初始化 Select2 库以增强选择标记的功能。

<?php foreach ($users as $user): ?>
$('#one_search_list-<?php echo $user->id; ?>').select2();
$('#two_search_list-<?php echo $user->id; ?>').select2();
$('#three_search_list-<?php echo $user->id; ?>').select2();
<?php endforeach; ?>

5. 完整的代码示例

将以下代码添加到你的 PHP 循环中，以实现每个模态框的独立运行：

<?php foreach ( $users as $user ): ?>
    <div class="modal fade" id="test-<?php echo $user->id ?>" data-bs-backdrop="static" data-bs-keyboard="false"
         tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">modal</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="post" id="new_test<?php echo $user->id ?>" class="new_test_modal">
                        <div class="row mb-3">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <select class="form-select" id="choices-<?php echo $user->id; ?>">
                                    <option value="">numbers</option>
                                    <option value="one">01</option>
                                    <option value="two">02</option>
                                    <option value="three">03</option>
                                </select>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 relation_fields-<?php echo $user->id; ?>"
                                 style="display: none">
                                <div class="col-12" id="one_search-<?php echo $user->id; ?>" style="display: none">
                                    <select name="one_search_list" id="one_search_list-<?php echo $user->id; ?>"
                                            class="form-control"></select>
                                </div>
                                <div class="col-12" id="two_search-<?php echo $user->id; ?>" style="display: none">
                                    <select name="two_search_list" id="two_search_list-<?php echo $user->id; ?>"
                                            class="form-control"></select>
                                </div>
                                <div class="col-12" id="three_search-<?php echo $user->id; ?>" style="display: none">
                                    <select name="three_search_list" id="three_search_list-<?php echo $user->id; ?>"
                                            class="form-control"></select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<?php endforeach; ?>
<script>
    $(document).ready(function () {
        <?php foreach ($users as $user): ?>
        $('#choices-<?php echo $user->id; ?>').on('change', function (e) {
            e.preventDefault();
            const relatedOption = $('#choices-<?php echo $user->id; ?> option:selected').val();
            if (relatedOption !== '') {
                $('.relation_fields-<?php echo $user->id; ?>').slideDown();
            } else {
                $('.relation_fields-<?php echo $user->id; ?>').slideUp();
            }
            if (relatedOption === 'one') {
                $('#one_search-<?php echo $user->id; ?>').css('display', 'block');
            } else {
                $('#one_search-<?php echo $user->id; ?>').css('display', 'none');
            }
            if (relatedOption === 'two') {
                $('#two_search-<?php echo $user->id; ?>').css('display', 'block')
            } else {
                $('#two_search-<?php echo $user->id; ?>').css('display', 'none')
            }
            if (relatedOption === 'three') {
                $('#three_search-<?php echo $user->id; ?>').css('display', 'block');
            } else {
                $('#three_search-<?php echo $user->id; ?>').css('display', 'none');
            }
        });
        $('#one_search_list-<?php echo $user->id; ?>').select2();
        $('#two_search_list-<?php echo $user->id; ?>').select2();
        $('#three_search_list-<?php echo $user->id; ?>').select2();
        <?php endforeach; ?>
    });
</script>

结论

通过遵循上述步骤，你可以轻松地单独触发 PHP 循环中的每个模态框的 jQuery 函数。使用唯一标识符、针对每个模态框编写 jQuery、选择正确的元素以及初始化 Select2 库，可以确保模态框根据下拉菜单的值正确显示字段，并增强用户体验。

常见问题解答

Q1：为什么使用唯一标识符很重要？
A1：唯一标识符可确保为每个模态框和相关元素选择正确的 jQuery 元素，从而防止意外的行为。

**Q2：我可以在每个模

Kyle

探索Web开发资源和人工智能教程的代码社区

PHP 循环中如何单独运行 Bootstrap 模态框的 jQuery 函数？

问题陈述

解决方案

1. 确保唯一的标识符

2. 针对每个模态框编写 jQuery

3. 使用唯一标识符选择元素

4. 初始化 Select2 库

5. 完整的代码示例

结论

常见问题解答

Kyle

桥接模式：构建灵活性与可扩展性的软件设计

Shell脚本中的变量与命名规范：助力高效编程

Go语言错误处理：如何写出更健壮的代码

简析：单机尝鲜Nebula Exchange SST导入的经验

Java+gRPC+maven+idea构建并发布可执行Jar包