我尝试搜索该网站，但发现了很多响应，这些响应必须处理该网站上的div切换。我还阅读了jquery网站上的文档。但是，我所有的编程经验都主要是关于后端Java服务，而我根本不是一个前端Web开发人员，因此，当我看到给出答案的所有解释时，我真的不理解它们。我已经将某项工作在一个单独的div上，但我希望将其工作在一个页面上，该页面将具有数百个我希望能够单独切换的div。
有人可以帮助我不仅获得答案，而且真正了解正在发生的事情吗？
我有一个包含两种语言的故事页面。默认情况下，一种语言是隐藏的，而另一种语言则显示。我希望能够单击一个单独的div，仅使该特定的div切换语言即可。我在示例中使用的是4个div，但是我希望它能在一个包含数百个div的页面上工作。
我尝试了一些不同的事情。
的HTML
<div>
<div id="l12" class="l1">
CHAPTER I Down the Rabbit-Hole
</div>
<div id="l22" class="l2" toggeled="true">
Capítulo I Descendo a Toca do Coelho
</div>
</div>
<div>
<div id="l13" class="l1">
<p>
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'
</p>
</div>
<div id="l23" class="l2" toggeled="true">
<p>
Alice estava começando a ficar muito cansada de sentar-se ao lado de sua irmã no banco e de não ter nada para fazer: uma ou duas vezes havia espiado o livro que a irmã estava lendo, mas não havia imagens nem diálogos nele, "e para que serve um livro", pensou Alice, "sem imagens nem diálogos?"
</p>
</div>
</div>
其余的部分
<head>
<meta charset="utf-8"/>
<style>
.l2{display: none;}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js">
<script>
$( ".toggeled" ).click(function() {
$( ".l10" ).toggle();
});
</script>
</head>
如果要动态执行此操作，则必须遍历文档以找到需要翻译的每个div。
您可以div通过给该部分一个类名（.eg .section）来指示翻译了哪些部分。然后将您的原始文本和翻译后的文本分别放在自己的divs中（这样您就可以知道要隐藏的内容和要显示的内容），并再次给它们各自的类名（例如.text和.english）。
<b>Click text to translate:</b>
<hr>
<div class="section">
<div class="english">
CHAPTER I Down the Rabbit-Hole
</div>
<div class="text">
Capítulo I Descendo a Toca do Coelho
</div>
</div>
<hr>
<div class="section">
<div class="english">
CHAPTER II Up the Rabbit-Hole
</div>
<div class="text">
Capítulo II Ascendo a Toca do Coelho
</div>
</div>
页面加载完成后，您的JavaScript随后将遍历每个.section并挂接click()事件，该事件将执行以下操作：
.english元素的区间内.text元素的区间内（＃2是可选的）
$( document ).ready(function() {
$('.section').each(function() {
// Save the two div references in a var so they can be called later within the event handler
var translationDiv = $(this).children('.english');
var originalDiv = $(this).children('.text'); // Remove if you do not want to hide original text upon toggling
translationDiv.hide(); // Sets initial translation to hide. You can alternatively do this via css such that all .english { display: none; }.
$(this).click(function(e) {
translationDiv.toggle();
originalDiv.toggle(); // Remove if you do not want to hide original text upon toggling
});
});
});
在下面的示例中它更加清晰：jsFiddle：http : //jsfiddle.net/SECLs/1/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句