Question

这是我的第一个问题，我是编码领域的初学者。

目前，我的问题很简单。我想创建一个在文本之间切换的按钮。例如，博客上用葡萄牙语撰写的帖子，只需单击一下按钮，即可将文本更改为英语。相信我，我已经搜索了很多，但我还没有找到正确的代码。因为我希望读者能够“无休止地”在两个文本之间切换。我设法创建了一个开关按钮但是当我第二次点击按钮时它没有返回原始文本。我也不希望按钮消失。第二个文本（首次单击按钮时激活，应与原始文本显示在同一位置。

提前感谢您的帮助，如果我不清楚，请告诉我。

修改

所以我设法创建了这个按钮（片段），但我需要另外两件事：

按钮也可以更改它的名称，因此当文本是葡萄牙语时，它会显示“Read in English”，当文本是英文时，它会显示“Read in Portuguese”。我应该在哪里进行更改？在按钮标签？怎么样？
是否可以删除单击按钮时出现的蓝色边框？

function readEnglish() {
    var x = document.getElementById('en');
    var y = document.getElementById('pt');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
    } else {
    	y.style.display = 'block';
        x.style.display = 'none';
    }
}

.EnglishButton {
	background-color: white;
	color: black;
	border: 2px solid #555555;
	padding: 5px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-family: Candara;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 10px;
	position:absolute;
}

.EnglishButton:hover {background-color: #F2F8F2}

.EnglishButton:active {
	background-color: #F2F8F2;
	box-shadow: 0 1px #F2F8F2;
	transform: translateY(1px)

<p id="pt">Português</p>
<p id="en" style ="display: none;">Inglês</p>

<button class="EnglishButton" onclick="readEnglish()">Read in English</button>

Answer 1

要简单回答您的问题，我添加了一个执行此操作的代码段。虽然如果你计划有很多文章或动态内容，你需要更多地抽象它。

如果您使用的是类似rails的框架，那么有更好的多语言支持选项，我建议您查看它们。

Hope this helps:

https://jsfiddle.net/j2Lqq4tv/

Answer 2

更新1

按钮的值现在会因点击而改为文本

这可能正是您所寻找的：

＆＃13;

function myFunction() {
    var x = document.getElementById('pt');
    var y = document.getElementById('en');
    var z = document.getElementById('bt');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        y.style.display = 'none';
        z.innerHTML = "Change to English";
    } else {
    	y.style.display = 'block';
        x.style.display = 'none';
        z.innerHTML = "Change to Português";
    }
}

＆＃13;

<button id="bt" onclick="myFunction()">Change to Português</button>


<p id="pt" style ="display:none;">This is meant to be text in portegues language</p>

<p id="en">This is text in English language</p>

＆＃13;

Answer 3

您可以尝试将Google Translate Plugin用于您的网站。以下是link到YouTube视频，介绍了该过程

但是，如果您只是想应用一个简单的解决方案来翻译博客帖子，那么这是我可以应用于简单博客帖子的JSFiddle解决方案。但是这些解决方案的可扩展性不高，您必须在每个页面中手动编写翻译。

var blog = document.getElementById('blog');
var translate = document.getElementById('translate');

dict = {
en: "Hello, my name is Gaurav Grover. How are you? Hello, my name is Gaurav Grover. How are you? Hello, my name is Gaurav Grover. How are you?",
pt: "Olá, meu nome é Gaurav Grover. Como você está? Olá, meu nome é Gaurav Grover. Como você está? Olá, meu nome é Gaurav Grover. Como você está?"
};
translate.onclick = abc;
function abc() {
  var lang = blog.dataset.language;
  if(lang == "en") {
    blog.textContent = dict.pt;
    blog.setAttribute('data-language', "pt");
  } else if(lang == "pt") {
    blog.textContent = dict.en;
    blog.setAttribute('data-language', "en"); 
    }
}

考虑到可伸缩性问题，如果您打算手动翻译页面上的多个文本，那么最好使用专用插件，例如translate.js

如何使用按钮在帖子的文本之间切换

3 个答案: