如何单独切换多个div？ [英] How do I toggle multiple divs individually?

问题描述

我试过搜索网站，我发现一堆响应，必须处理在这个网站上切换div。我也阅读了jquery网站上的文档。然而我所有的编程经验主要是后端的java服务，我不是一个前端web开发，所以当我看到给出的答案的所有解释，我真的不了解。我已经得到了工作在一个单独的div，但我想要的工作在一个页面，将有一百个div，我想要能够单独切换。

我有一个有两种语言的故事的页面，有人帮我不只是得到答案，而是真正了解发生了什么。默认情况下隐藏一种语言，并显示其他语言。我想要能够点击一个单独的div，只是有特定的div切换语言。我在我的例子中使用4个div，但我想要在一个页面上有数百个div。

我尝试了几个不同的

• 我需要为外部div指定一个类或ID，我已经封装了东西吗？为什么？


• 如何让我的操作应用于页面上的每个div，而无需使用在每个div上写入onclick（）属性并传递个别ID？

HTML

 < div> 
< div id =l12class =l1> 
第一章下来兔子洞
< / div> 
< div id =l22class =l2toggeled =true> 
CapítuloI Descendo a Toca do Coelho 
< / div> 
< / div> 
< div> 
< div id =l13class =l1> 
< p> 
爱丽丝开始对姐姐坐在银行很累了，没有什么可做：一两次，她偷窥了她姐姐正在读的书，但它没有图片或对话，'和一本书的用途是什么，'爱丽丝没有图片或谈话？
< / p> 
< / div> 
< div id =l23class =l2toggeled =true> 
< p> 
 Alice estavacomeçandoa ficar muito cansada de sentar-se ao lado de suairmãno banco e denãoter nada para fazer：uma ou duas vezes havia espiado o livro que airmãestava lendo，masnãohavia imagens nemdiálogos nele，e para que serve um livro，pensou Alice，sem imagens nemdiá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> 
  

解决方案

如果你想动态这样做，

您可以指定哪些 div 已翻译部分通过给该部分一个类名（.eg .section ）。然后把你的原始和翻译文本放在自己的 div （所以你知道哪个隐藏和显示），并给每个自己的类名称（例如 .text 和 .english ）。

 < b>点击要翻译的文字：< / b> 
< hr> 
< div class =section> 
< div class =english> 
第一章下来兔子洞
< / div> 
< div class =text> 
CapítuloI Descendo a Toca do Coelho 
< / div> 
< / div> 
< hr> 
< div class =section> 
< div class =english> 
第二章向上兔子孔
< / div> 
< div class =text> 
CapítuloII Ascendo a Toca do Coelho 
< / div> 
< / div> 
  

页面加载完成后，JavaScript将循环访问。部分并挂钩 click（）事件，执行以下操作：

1. 通过切换中的 元素
的可见性来显示英语文本

2. 通过切换 .text 元素的可见性隐藏原文

（＃2是可选的）

  b $ b $（'。section'）。each（function（）{
 //在var中保存两个div引用，以便稍后在事件处理程序中调用
 var translationDiv = $ this）.children（'。english'）; 
 var originalDiv = $（this）.children（'。text'）; //如果你不想在翻转时隐藏原始文本，删除
 
 translationDiv.hide（）; //设置初始翻译为隐藏。你也可以通过css这样做，所有.english {display：none; }。 
 
 $（this）.click（function（e）{
 translationDiv.toggle（）; 
 originalDiv.toggle（）; //如果你不想隐藏原始文本切换
}）; 
}）; 
}）; 
  

在这里的例子中更清楚：
jsFiddle： http://jsfiddle.net/SECLs/1/

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>

解决方案

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:

1. Show English text by toggling visibility of the .english element within the section
2. 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/

这篇关于如何单独切换多个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！