如何分别切换多个div？

Question

I've tried searching the site and I found a bunch of responses that have to deal with toggling divs on this site. 我尝试搜索该网站，但发现一堆必须处理此网站上的div的响应。 I've also read the documentation on the jquery site. 我还阅读了jquery网站上的文档。 However all of my programming experience has been with mostly back-end java services and I am not a front-end web dev at all so when I see all of the explanations that are given to the answers, I really don't understand them. 但是，我所有的编程经验都主要是关于后端Java服务，而我根本不是一个前端Web开发人员，因此，当我看到给出答案的所有解释时，我真的不理解它们。 I've gotten things to work on one individual div but I want things to work on a page that will have hundred of divs that I want to be able to toggle individually. 我已将某项工作在一个单独的div上，但我希望将其工作在一个页面上，该页面将具有数百个我希望能够单独切换的div。

Can somebody help me not just get the answer but to really understand what is going on? 有人不仅可以帮助我，而且可以真正了解正在发生的事情吗？

I have a page with story that has two languages. 我有一个包含两种语言的故事页面。 One language is hidden by default and the other language is displayed. 默认情况下，一种语言是隐藏的，而另一种语言则显示。 I want to be able to click on an individual div and just have that specific div toggle the languages. 我希望能够单击一个单独的div，仅使该特定的div切换语言即可。 I'm using 4 divs in my example, but I want this to work on a page that will have hundreds of divs on it. 我在示例中使用的是4个div，但是我希望它能在一个包含数百个div的页面上工作。

I've tried a few different things. 我尝试了一些不同的事情。

Do I need to assign a class or id to the outside divs that I have wrapping things? 我是否需要为包装了东西的外部div分配一个类或ID？ Why? 为什么？
How to get my action to apply to every div on the page without having to use write an onclick() attribute to each div and passing in individual id's? 如何使我的操作适用于页面上的每个div，而不必使用为每个div编写onclick（）属性并传递单个ID的方法？

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

The Rest 其余的部分

<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

If you want to dynamically do this, you will have to traverse through the document to find each div which needs to be translated. 如果要动态执行此操作，则必须遍历文档以找到需要翻译的每个div。

You can indicate which div has translated parts by giving that section a classname (.eg .section ). 您可以通过为该部分指定一个类名（例如.section ）来指示哪个div已翻译了部分。 Then placing your original and translated text each in their own div s (so you know which to hide and which to show) and giving each their own classnames again (eg .text and .english ). 然后将您的原始文本和翻译后的文本分别放在各自的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>

Upon page load complete, your JavaScript will then loop through each of the .section and hook the click() event, which does the following: 页面加载完成后，您的JavaScript随后将遍历每个.section并钩住click()事件，该事件将执行以下操作：

Show English text by toggling visibility of the .english element within the section 通过切换.english元素在此部分中的可见性来显示英文文本
Hide original text by toggling visibility of the .text element within the section 通过切换该部分中 .text元素的可见性来隐藏原始文本

(#2 Is optional) （＃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
        });
    });
});

Its much clearer in the example here: jsFiddle: http://jsfiddle.net/SECLs/1/ 在这里的示例中，它更加清晰：jsFiddle： http : //jsfiddle.net/SECLs/1/

Answer 2

Do I need to assign a class or id to the outside divs that I have wrapping things? 我是否需要为包装了东西的外部div分配一个类或ID？ Why? 为什么？

You don't have to, it's up to you. 您不必必须，这取决于您。 In this case I think it's unnecessary. 在这种情况下，我认为这是不必要的。

How to get my action to apply to every div on the page without having to use write an onclick() attribute to each div and passing in individual id's? 如何使我的操作适用于页面上的每个div，而不必使用为每个div编写onclick（）属性并传递单个ID的方法？

Select via. 选择通过。 class name - you already seem to have that part set up (with .l1 on English paragraphs and .l2 on Portuguese paragraphs). 类名-你似乎已经有部分设置（与.l1英语段落和.l2葡萄牙段）。

Here is a toggle function as such - you don't have to change your HTML, and all you need to do to add another language to it is to add the class name in the selector: 这是一个切换功能-您无需更改HTML，向其中添加另一种语言所需要做的就是在选择器中添加类名称：

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

jsFiddle here. jsFiddle在这里。

Here's an example of it being used for four languages, just give them the respective class in HTML ( l3 , l4 ), hide them via CSS, and add the class names to the selector (I've implemented wrapping so that it goes back to language 1 afterwards): 这是一种用于四种语言的示例，只需给它们提供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. 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