可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've tried searching the site and I found a bunch of responses that have to deal with toggling divs on this site. I've also read the documentation on the jquery site. 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. 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.

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

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

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>

回答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.

You can indicate which div has translated parts by giving that section a classname (.e.g .section). Then placing your original and translated text each in their own divs (so you know which to hide and which to show) and giving each their own classnames again (e.g. .text and .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:

Show English text by toggling visibility of the .english element within the section
Hide original text by toggling visibility of the .text element within the section

(#2 Is optional)

$( 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/

回答2:

Do I need to assign a class or id to the outside divs that I have wrapping things? 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?

Select via. class name - you already seem to have that part set up (with .l1 on English paragraphs and .l2 on Portuguese paragraphs).

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:

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

jsFiddle here.

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

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

jsFiddle here.