Question

我有四个不同的德语div。通过单击按钮，我想隐藏德语div，而是显示之前隐藏的英语div。

有两种方法可以在两个div之间进行更改，但是如何通过在一个按钮上单击一次来同时更改多个div？

Answer 1

您需要使用JavaScript 或者更简单的方法来处理像jQuery这样的JavaScript库。

基本方法是将data- *属性和类添加到元素中：

<button class="langButton" data-language="en">EN ARTICLES</button>
<button class="langButton" data-language="de">DE ARTICLES</button>
<button class="langButton" data-language="it">IT ARTICLES</button>

<div class="article en">En 1...</div>
<div class="article en">En 2...</div>
<div class="article de">De 1...</div>
<div class="article de">De 2...</div>
<div class="article it">It 1...</div>
<div class="article it">It 2...</div>

比你的jQuery看起来像：

$(function() {   // Document is now ready to be manipulated

   // Cache all .article elements
   var $articles = $('.article');

   $(".langButton").click(function(){
       // Get the "en", "de" or "it" value
       var language = $(this).attr("data-language");
       // Hide all articles
       $articles.hide();
       // Show only the ones that have the ."language" related class
       $("."+ language ).show();
   });

});

这里有live jsBin example你可以玩甚至下载

Answer 2

你是否被限制不使用像jQuery这样的框架？ jQuery提供了多种方法来在多个选定元素上运行代码。

以下是纯JavaScript的基本工作解决方案：

var shown = 'english';

function swap() {
    if (shown === 'english') {
       document.getElementById('german-1').style.display = "inline-block";
       document.getElementById('german-2').style.display = "inline-block";
       document.getElementById('german-3').style.display = "inline-block";
       document.getElementById('english-1').style.display = "none";
       document.getElementById('english-2').style.display = "none";
       document.getElementById('english-3').style.display = "none";
       shown = 'german';
   } else {
       document.getElementById('english-1').style.display = "inline-block";
       document.getElementById('english-2').style.display = "inline-block";
       document.getElementById('english-3').style.display = "inline-block";
       document.getElementById('german-1').style.display = "none";
       document.getElementById('german-2').style.display = "none";
       document.getElementById('german-3').style.display = "none";
       shown = 'english';
   }
};

链接到jsfiddle： https://jsfiddle.net/v2k3rzge/

希望有所帮助

单击一次按钮即可切换多个Div名称/内容

2 个答案: