个人中心
gpt4 book ai didi

javascript - 如何单独切换多个 div？

转载 作者：行者123 更新时间：2023-11-30 08:44:40 25 4
gpt4 key购买 nike

我尝试搜索该站点，发现一堆必须处理该站点上切换 div 的响应。我还阅读了 jquery 站点上的文档。然而，我所有的编程经验主要是后端 Java 服务，我根本不是前端 Web 开发人员，所以当我看到对答案的所有解释时，我真的不 理解他们。我已经在一个单独的 div 上工作，但我希望在一个页面上工作，该页面将包含数百个 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>

最佳答案

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

您可以通过给该部分一个类名(例如 .section)来指示哪个 div 已经翻译了部分。然后将您的原始文本和翻译文本分别放在它们自己的 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 并 Hook click() 事件，该事件执行以下操作:

  1. 通过切换 .english 元素在部分中的可见性来显示英文文本
  2. 通过切换 .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/

关于javascript - 如何单独切换多个 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23038311/

25 4 0
文章推荐： javascript - 因为在 MSIE 10 上的行为不同
文章推荐： machine-learning - 基于隐马尔可夫模型的分类器中状态数的影响
文章推荐： matlab - 如何在 MATLAB 上开始 SVM 训练
文章推荐： javascript - 在 HTML 文本区域中打印 PHP 变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com