Question

我希望创建一个简单的文本翻译器，我知道如何使用JQuery更改div的文本。但是我想根据文本文件进行更改。

这是我可以使用文本值的代码。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <div id="textChange">Text before it's changed</div>
        <input type="button" id="mybutton" value="click to change"/>
    </body>
    <script type="text/javascript">
        // A $( document ).ready() block.
        $( document ).ready(function() {

            $( "#mybutton" ).click(function() {
              $("#textChange").html("Updated text, after button click.");
            });
        });
    </script>
</html>

我现在要做的就是说2个按钮，1个按钮用于英语，另一个用于说法语。当网站加载时，我希望它以英文显示，当点击该按钮时，它将文本更改为法文。

我将两个文本都作为文本文件，所以我想在每次按下一个按钮时加载它们。

Answer 1

<强> HTML 两个必需按钮和文本更改区域

<div id="textChange">Text before it's changed</div>
<button type="button" data-lang="french">French</button>
<button type="button" data-lang="english">English</button>

<强>的js

为每个文件路径创建2个变量。创建一个函数来将文件传递给$.get()方法，该方法将检索文件（get更通用，回调处理AJAX调用的成功响应，您可以自由定义所需的任何行为）。

这是基于html中按钮的data-lang属性赋值定义的条件。

$(function () {

    var englishFilePath = "../Content/english.txt",
        frenchFilePath = "../Content/french.txt";

        function chgLang(lang){
            $.get(lang, function(data) {
                //process text file line by line
                $('#textChange').html(data.replace('n','<br />'));
            });
        };

        $("button[data-lang]").click(function () {

            $(this).data("lang") === "french" ? chgLang(frenchFilePath) : chgLang(englishFilePath);

        });
    });

Answer 2

$( document ).ready(function() {
    $( "#mybutton" ).click(function() {
    $("#textChange").load("file.txt");
    });
});

这很有效。但是，这应该没有换行符。

我想我现在可以在其中包含<br>的文本文件。如果有办法逐行浏览文本文件会更好。

使用JQuery从文本文件列表中更改div的文本

2 个答案: