Question

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

有人可以帮助我，不仅要得到答案，还要真正理解发生了什么？

我有一个故事页面有两种语言。默认情况下隐藏一种语言，并显示另一种语言。我希望能够点击一个单独的div，然后让特定的div切换语言。我在我的例子中使用了4个div，但是我想让它在一个页面上工作，该页面上会有数百个div。

我尝试了一些不同的东西。

我是否需要为包装内容的外部div分配一个类或id？为什么？
如何让我的动作应用于页面上的每个div而不必使用onclick（）属性写入每个div并传入单个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。

您可以通过为该部分指定一个类名（.e.g div）来指明哪个.section已翻译了部分。然后将原始文本和翻译文本分别放在他们自己的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而不必使用onclick（）属性写入每个div并传入个人身份？

选择通过。班级名称 - 您似乎已经设置了该部分（英语段落上有.l1，葡萄牙段落上有.l2）。

这是一个切换功能 - 您不必更改HTML，只需在选择器中添加类名称即可添加其他语言：

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

jsFiddle here.

以下是一个用于四种语言的示例，只需在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 here.

如何单独切换多个div？

2 个答案: