Переключить несколько имен/содержимого Div одним нажатием кнопки

Question

У меня есть 4 разных div на немецком языке. Нажимая кнопку, я хочу скрыть немецкие divs и вместо этого показывать английские divs, которые скрыты раньше.

Есть способы изменить между двумя div, но как я могу изменить div div div одновременно, щелкнув один раз на одной кнопке?

Answer 1

Вы не можете использовать фреймворк как 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/

Надеется, что это помогает

Answer 2

Вам нужно JavaScript
или для проще использовать библиотеку JavaScript, такую ​​как jQuery.

Основной подход заключается в добавлении данных- * атрибуты и классы для ваших элементов:

<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 вы можете играть с или даже download