javascript - 是否可以将文本文件加载到引导工具提示标题？

Question

我想将一个文本文件加载到我的引导工具提示标题中。

这是我使用简单值的代码的一部分:

<div>
    <a id="A" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> A</a>
    <a id="B" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> B</a>
    <a id="C" type="button" class="btn btn-outline-secondary btn-lg" data-toggle="tooltip" dataplacement="bottom" href="Some action"> C</a>
</div>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

    $('#A').tooltip({
        title: "June"
    });
    $('#B').tooltip({
        title: "July"
    });
    $('#C').tooltip({
        title: "August"
    });
</script>

我有一个文本文件:

June
July
August

此文本文件将使用一些脚本进行更新，我正在尝试“动态”将这 3 个值放在我的 3 个工具提示标题上。

我尝试了一些使用 XMLHttpRequest() 或 $.get() 的方法，但没有得到正确的结果。

例如我试过:

function(Atooltip(node) {
    $.get("My text File", function(responseText) {
        var Month = responseText;
    });
    console.log(Month);
    return Month;
}

$('#A').tooltip({
    title: Atooltip
});

控制台日志返回:

June
July
August

但我的工具提示标题是空的。

有更好的方法吗？

或者也许是一种使循环连续执行文件的树行的方法？

Answer 1

ajax 是异步的，在您的代码中，您在调用实际返回值之前注入(inject)值，因此它是空的。试试看

 $.get("My text File", function (responseText) {
        var Month = responseText;
        console.log(Month);
    }).done(function (Month) {
        console.log(Month);
        $('#A').tooltip({
            title: Month
        });
    });

要拆分结果，给定您发布的文件结构(每行一个月)，您可以:

$.get("My text File", function (responseText) {
    let Months = responseText.split("\n");
    // Months is now an array -> ["June", "July", "August"]
}).done(function (Month) {
    console.log(Month);

    $('#A').tooltip({
        title: Month[0] // June
    });
    
    $('#B').tooltip({
        title: Month[1] // July
    });

    // Keep going as much as you need ...
});

将来考虑检索 json 而不是纯文本，以便更容易分配多个值。