Javascript 如何分别切换多个div？_Javascript_Jquery_Html_Css_Toggle

Javascript 如何分别切换多个div？

javascript jquery html css

Javascript 如何分别切换多个div？,javascript,jquery,html,css,toggle,Javascript,Jquery,Html,Css,Toggle,我试着搜索这个网站，我发现了一堆关于在这个网站上切换div的回复。我还阅读了jquery站点上的文档。然而，我所有的编程经验都是使用后端java服务的，我根本不是前端web开发人员，所以当我看到对答案的所有解释时，我真的不理解它们。我已经在一个单独的div上做了一些事情，但是我希望在一个页面上做一些事情，这个页面将有数百个div，我希望能够单独切换有人能帮我不仅得到答案，而且真正了解发生了什么吗我有一个有两种语言的故事页面。默认情况下，一种语言隐藏，另一种语言显示。我希望能够点击一个单独的d

我试着搜索这个网站，我发现了一堆关于在这个网站上切换div的回复。我还阅读了jquery站点上的文档。然而，我所有的编程经验都是使用后端java服务的，我根本不是前端web开发人员，所以当我看到对答案的所有解释时，我真的不理解它们。我已经在一个单独的div上做了一些事情，但是我希望在一个页面上做一些事情，这个页面将有数百个div，我希望能够单独切换

有人能帮我不仅得到答案，而且真正了解发生了什么吗

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

我试过几种不同的方法

我是否需要为我包装东西的外部div分配一个类或id？为什么?
如何让我的操作应用于页面上的每个div，而不必对每个div使用write 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>


第一章兔子洞
卡皮图罗一世的后代

爱丽丝开始厌倦了坐在她姐姐旁边的河岸上，厌倦了无所事事：有一两次她偷看了妹妹正在读的那本书，但里面没有图片和对话。爱丽丝想，没有图片和对话的书有什么用呢


Alice estava começando a ficar muito cansada de sentar se ao lado de sua irmãno banco de nãter nada para fazer:uma ou duas vezes havia espiado o o o livro que a irmãestava lendo，mas nãhavia images nem diálogos nele，“e para que service um livro”，pensou Alice，“sem images nem diálogos？”

其余的

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


.l2{显示：无；}
$（“.toggeled”）。单击（函数（）{
$（“.l10”）.toggle（）；
});

我是否需要为我拥有的外部div分配一个类或id 包装东西？为什么?

你不必，这取决于你。在这种情况下，我认为没有必要

如何让我的操作应用于页面上的每个div，而无需使用向每个div写入onclick（）属性并传入个人身份证

选择via。类名-您似乎已经设置好了该部分（英语段落使用

.l1

，葡萄牙语段落使用

.l2

）

这是一个切换函数，您无需更改HTML，只需在选择器中添加类名即可添加另一种语言：

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

下面是一个用于四种语言的示例，只需以HTML（

l3

，

l4

）为它们提供相应的类，通过CSS隐藏它们，并将类名添加到选择器中（我已经实现了包装，以便之后返回到语言1）：

我是否需要为我拥有的外部div分配一个类或id 包装东西？为什么?

你不必，这取决于你。在这种情况下，我认为没有必要

如何让我的操作应用于页面上的每个div，而无需使用向每个div写入onclick（）属性并传入个人身份证

选择via。类名-您似乎已经设置好了该部分（英语段落使用

.l1

，葡萄牙语段落使用

.l2

）

这是一个切换函数，您无需更改HTML，只需在选择器中添加类名即可添加另一种语言：

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

下面是一个用于四种语言的示例，只需以HTML（

l3

，

l4

）为它们提供相应的类，通过CSS隐藏它们，并将类名添加到选择器中（我已经实现了包装，以便之后返回到语言1）：

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

您可以通过为该节指定类名（.e.g

.section

）来指示哪个

div

具有已翻译的部分。然后将原始文本和翻译文本分别放在各自的

div

中（这样您就知道要隐藏哪些和要显示哪些），并再次为各自指定自己的类名（例如

.text

和

.english

）

在这里的示例中更清楚：

jsidle:

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

您可以通过为该节指定类名（.e.g

.section

）来指示哪个

div

具有已翻译的部分。然后将原始文本和翻译文本分别放在各自的

div

中（这样您就知道要隐藏哪些和要显示哪些），并再次为各自指定自己的类名（例如

.text

和

.english

）

在这里的示例中更清楚：

jsFiddle:

我不知道可以同时将一个函数附加到两个不同的类。谢谢。@j.jerrod.taylor等等，我以为你想在点击一个段落时改变整个文本，而不仅仅是这一段？如果我不清楚，很抱歉。我试着让每个段落都改变。@j.jerrod.taylor我可以用3行代码做其他人做的事情，而不需要改变你的HTML，只需添加三个字母就可以让它在多种语言中重复使用。等等，我不知道你可以同时把一个函数附加到两个不同的类上。谢谢。@j.j

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

$( 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
        });
    });
});