Question

我在项目中使用

导入了Contact.txt文件。

id='contact'

我的上传部分具有以下功能：

var loadFile = function ('./data/en/Contact.txt', 'contact', true) {
    var allText;
    var titleText;

    var txtFile = new XMLHttpRequest();
    txtFile.open("GET", source, true);

    txtFile.onload = function () {
        if (txtFile.readyState === txtFile.DONE) {
            if (txtFile.status === 200) {
                allText = txtFile.responseText.split('\n');
                if (hasOnlyTitle == false) {
                    //selects the first line from the txt file, in our case the title
                    titleText = allText[0];

                    //removes the first line from txt file
                    allText.splice(0, 1).join('\n');
                    document.getElementById(targetId + "Title").innerHTML = titleText;
                }
                var finalText = allText.join('<br />');
            }
            document.getElementById(targetId).innerHTML = finalText;
        }
    };
    txtFile.send(null);
}

我测试过的上传功能已分离，并且可以正常工作...

我试图将文件中的文本导入到模式组件的主体中，但是它什么也不会显示...

这是html部分：

            <div id="myModal" class="modal">

                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <p id="contact"></p>
                </div>
            </div>

这是js文件：

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("info");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function () {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

在您的代码上，您永远不会加载文件的内容。假设您在服务器上有该文件，则可以在打开页面时加载内容，将这样的内容添加到准备就绪的jQuery文档中：

$.get('/contact.txt', function(data) {
    $("#contact").text(data)
});

或在btn.onclick中使用相同的功能。这将变慢，并且信息可能需要一些时间来加载。因此，最好在文档已加载/就绪时加载信息。

这样，当用户打开模式时，联系信息将很快可用。

将txt文件导入模态主体

1 个答案: