如何分别切换多个div？

Question

我尝试搜索该网站，但发现一堆必须处理此网站上的div的响应。 我还阅读了jquery网站上的文档。 但是，我所有的编程经验都主要是关于后端Java服务，而我根本不是一个前端Web开发人员，因此，当我看到给出答案的所有解释时，我真的不理解它们。 我已将某项工作在一个单独的div上，但我希望将其工作在一个页面上，该页面将具有数百个我希望能够单独切换的div。

有人不仅可以帮助我，而且可以真正了解正在发生的事情吗？

我有一个包含两种语言的故事页面。 默认情况下，一种语言是隐藏的，而另一种语言则显示。 我希望能够单击一个单独的div，仅使该特定的div切换语言即可。 我在示例中使用的是4个div，但是我希望它能在一个包含数百个div的页面上工作。

我尝试了一些不同的事情。

我是否需要为包装了东西的外部div分配一个类或ID？ 为什么？
如何使我的操作适用于页面上的每个div，而不必使用为每个div编写onclick（）属性并传递单个ID的方法？

的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>

Answer 1

如果要动态执行此操作，则必须遍历文档以找到需要翻译的每个div。

您可以通过为该部分指定一个类名（例如.section ）来指示哪个div已翻译了部分。 然后将您的原始文本和翻译后的文本分别放在各自的div （这样您就可以知道要隐藏的内容和要显示的内容），并再次分别赋予各自的类名（例如.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/

Answer 2

我是否需要为包装了东西的外部div分配一个类或ID？ 为什么？

您不必必须，这取决于您。 在这种情况下，我认为这是不必要的。

如何使我的操作适用于页面上的每个div，而不必使用为每个div编写onclick（）属性并传递单个ID的方法？

选择通过。 类名-你似乎已经有部分设置（与.l1英语段落和.l2葡萄牙段）。

这是一个切换功能-您无需更改HTML，向其中添加另一种语言所需要做的就是在选择器中添加类名称：

$(".l1, .l2").click(function() {
    $(this).hide();
    var languages = $(this).parent().children();
    languages.eq((languages.index(this) + 1) % languages.length).show();
});

jsFiddle在这里。

这是一种用于四种语言的示例，只需给它们提供HTML（ l3 ， l4 ）中的相应类，通过CSS隐藏它们，然后将类名添加到选择器中（我已经实现了包装，因此可以返回到之后使用语言1）：

$(".l1, .l2, .l3, .l4").click(function() {
    $(this).hide();
    var languages = $(this).parent().children();
    languages.eq((languages.index(this) + 1) % languages.length).show();
});

jsFiddle在这里。

如何分别切换多个div？

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-04-13 02:34:08

解决方案2
1 2014-04-13 02:16:29

如何分别切换多个div？

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-04-13 02:34:08

解决方案2 1 2014-04-13 02:16:29

解决方案1
4 已采纳 2014-04-13 02:34:08

解决方案2
1 2014-04-13 02:16:29