j.j*_*lor 1 html javascript css jquery toggle
我尝试搜索该网站，发现了一堆必须处理该网站上切换 div 的响应。我还阅读了 jquery 网站上的文档。然而，我所有的编程经验主要是后端 java 服务，而且我根本不是前端 Web 开发人员，所以当我看到所有对答案的解释时，我真的不明白它们。我已经在一个单独的 div 上工作了，但我希望在一个页面上工作，该页面将有数百个 div，我希望能够单独切换。
\n\n有人可以帮助我不仅得到答案，而且真正了解发生了什么吗？
\n\n我有一个包含两种语言的故事的页面。默认情况下隐藏一种语言，显示另一种语言。我希望能够单击单个 div，然后让该特定 div 切换语言。我在示例中使用了 4 个 div，但我希望它能够在包含数百个 div 的页面上运行。
\n\n我尝试过一些不同的事情。
\n\n超文本标记语言
\n\n<div>\n <div id="l12" class="l1">\n CHAPTER I Down the Rabbit-Hole\n </div>\n <div id="l22" class="l2" toggeled="true">\n Cap\xc3\xadtulo I Descendo a Toca do Coelho\n </div>\n</div>\n<div>\n <div id="l13" class="l1">\n <p>\n 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?\'\n </p>\n </div>\n <div id="l23" class="l2" toggeled="true">\n <p>\n Alice estava come\xc3\xa7ando a ficar muito cansada de sentar-se ao lado de sua irm\xc3\xa3 no banco e de n\xc3\xa3o ter nada para fazer: uma ou duas vezes havia espiado o livro que a irm\xc3\xa3 estava lendo, mas n\xc3\xa3o havia imagens nem di\xc3\xa1logos nele, "e para que serve um livro", pensou Alice, "sem imagens nem di\xc3\xa1logos?"\n </p>\n </div>\n</div>\n其余的部分
\n\n<head>\n<meta charset="utf-8"/>\n<style>\n .l2{display: none;}\n</style>\n<script src="//code.jquery.com/jquery-1.10.2.js">\n<script>\n $( ".toggeled" ).click(function() {\n $( ".l10" ).toggle();\n });\n</script>\n</head>\n如果您想动态执行此操作，则必须遍历文档才能找到需要翻译的每个 div。
\n\ndiv您可以通过为该部分提供类名（.eg ）来指示哪个部分已翻译.section。然后将原始文本和翻译文本分别放在各自的divs 中（这样您就知道要隐藏哪些内容以及要显示哪些内容），并再次为每个文本提供自己的类名（例如.text和.english）。
<b>Click text to translate:</b>\n<hr>\n<div class="section">\n <div class="english">\n CHAPTER I Down the Rabbit-Hole\n </div>\n <div class="text">\n Cap\xc3\xadtulo I Descendo a Toca do Coelho\n </div>\n</div>\n<hr>\n<div class="section">\n <div class="english">\n CHAPTER II Up the Rabbit-Hole\n </div>\n <div class="text">\n Cap\xc3\xadtulo II Ascendo a Toca do Coelho\n </div>\n</div>\n页面加载完成后，您的 JavaScript 将循环遍历每个事件.section并挂钩click()事件，这会执行以下操作：
.english元素的可见性来显示英文文本.text元素的可见性来隐藏原始文本（#2 是可选的）
\n\n$( document ).ready(function() {\n $(\'.section\').each(function() {\n // Save the two div references in a var so they can be called later within the event handler\n var translationDiv = $(this).children(\'.english\');\n var originalDiv = $(this).children(\'.text\'); // Remove if you do not want to hide original text upon toggling\n\n translationDiv.hide(); // Sets initial translation to hide. You can alternatively do this via css such that all .english { display: none; }.\n\n $(this).click(function(e) {\n translationDiv.toggle();\n originalDiv.toggle(); // Remove if you do not want to hide original text upon toggling\n });\n });\n});\n此处的示例更加清晰：\njsFiddle： http: //jsfiddle.net/SECLs/1/
\n| 归档时间： |
|
| 查看次数： |
3120 次 |
| 最近记录： |