javascript - 显示/隐藏 jquery 点击功能

Question

我的代码有问题，我不知道为什么它不起作用。我的目标是拥有我的默认值:

只有 #en div 可见的 EN div，默认情况下必须隐藏 FR & DE id。当我们点击 FR 或 DE 时，我们只有 #fr 或 #de 可见，其余隐藏。

这是我的JSFIDDLE

这是我的代码:

    $('#en').click(function(){
    $('fr[id^=fr], de[id^=de]').hide();
    $('#en1, #en2').show();
    });

    $('#fr').click(function(){
    $('en[id^=en], de[id^=de]').hide();
    $('#fr1, #fr2').show();
    });

    $('#de').click(function(){
    $('fr[id^=fr], en[id^=en]').hide();
    $('#de1, #de2').show();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="button" id="en">EN</a>
    <a class="button" id="fr">FR</a>
    <a class="button" id="de">DE</a>
    <div id="en1">1</div>
    <div id="fr1">2</div>
    <div id="de1">3</div>
    <div id="en2">4</div>
    <div id="fr2">5</div>
    <div id="de2">6</div>

Answer 1

这是我认为这段代码应该如何工作的 jsfiddle: http://jsfiddle.net/MJambazov/tdeotges/1/

尽量遵循 DRY 原则，它会让你的代码对人类更具可读性。

$(document).ready(function() {
  $('.lan').hide();
  $('.en').show();
});

$('.button').click(function(event) {
  $('.lan').hide();
  var selectedLanguage = $(this).attr('id');
  var setActiveLanguage = "." + selectedLanguage;
  $(setActiveLanguage).show();
});