在模式中设置复选框标签的文本

Question

我有一个创建新帖子的模式。我想让用户选择部门进行共享，所以我使用复选框来选择受众。

HTML：

<div class="modal fade" id="createNewPostModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title">Create New Post</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form method="post" id="createNewPostForm">
                        <textarea rows="3" name="text" placeholder="Write something..."></textarea>
                        <div>
                            <p>Select audience to share</p>
                            <div>
                                <input type="checkbox" id="depACheckBox">
                                <label id="depACheckBoxLabel" for="depACheckBox"></label>
                                <input type="checkbox" id="depBCheckBox" >
                                <label id="depBCheckBoxLabel" for="depBCheckBox"></label>
                                <input type="checkbox" id="depCCheckBox">
                                <label id="depCCheckBoxLabel" for="CheckBox"></label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success" onclick="return createNewPost(this.parentNode);" id="createNewPostButton" data-dismiss="modal">Share</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

不同的用户有不同的部门要显示，并保存在 mongoDB 用户文档中。我需要在加载模式时设置复选框的标签。

我在页面加载时获取用户的文档，所以我在 getUser 函数中尝试：

    $(document).ready(function() {
        $("#createNewPostModal").on('load', function(){
            document.getElementById('depACheckBoxLabel').innerText = window.user.depA.name;
            document.getElementById('depBCheckBoxLabel').innerText = window.user.depB.name;
            document.getElementById('depCCheckBoxLabel').innerText = window.user.depC.name;
        });
    });

我也尝试了innerHTML，但标签仍然为空。如何在模态显示时或之后设置标签文本？

Answer 1

如果您在 window 以外的任何地方调用 onload，它将无效。

如果您想在运行函数之前检查 #createNewPostModal div，您可以执行以下示例：

$(document).ready(checkModal);

function checkModal () {
  if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page
    document.getElementById('depACheckBoxLabel').innerHTML = "this";
    document.getElementById('depBCheckBoxLabel').innerHTML = "works";
    document.getElementById('depCCheckBoxLabel').innerHTML = "now";
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="createNewPostModal">
  <p>Select audience to share</p>
  <div>
    <input type="checkbox" id="depACheckBox">
    <label id="depACheckBoxLabel" for="depACheckBox"></label>
    <input type="checkbox" id="depBCheckBox">
    <label id="depBCheckBoxLabel" for="depBCheckBox"></label>
    <input type="checkbox" id="depCCheckBox">
    <label id="depCCheckBoxLabel" for="CheckBox"></label>
  </div>
</div>

在引用该容器时，请随意调整对 :visible 的检查以适合您的需要。

---

此外，根据您的评论要求，如果您想调用此函数onclick，您可以这样做：

$('button').click(checkModal);

function checkModal () {
  if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page
    document.getElementById('depACheckBoxLabel').innerHTML = "this";
    document.getElementById('depBCheckBoxLabel').innerHTML = "works";
    document.getElementById('depCCheckBoxLabel').innerHTML = "now";
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="createNewPostModal">
  <p>Select audience to share</p>
  <div>
    <input type="checkbox" id="depACheckBox">
    <label id="depACheckBoxLabel" for="depACheckBox"></label>
    <input type="checkbox" id="depBCheckBox">
    <label id="depBCheckBoxLabel" for="depBCheckBox"></label>
    <input type="checkbox" id="depCCheckBox">
    <label id="depCCheckBoxLabel" for="CheckBox"></label>
  </div>
</div>


<button onclick="checkModal()">Click</button>

只需将button 替换为您想要触发函数的任何元素。

---

最后，如果不需要等待 #createNewPostModal div 加载，那么只需像这样调用你的函数，它应该可以工作：

$(document).ready(function() { document.getElementById('depACheckBoxLabel').innerHTML = window.user.depA.name; document.getElementById('depBCheckBoxLabel').innerHTML = window.user.depB.name; document.getElementById('depCCheckBoxLabel').innerHTML = window.user.depC.name; });