Показать/скрыть функцию jquery click

Question

У меня проблема с моим кодом, я не знаю, почему он не работает. Моя цель - иметь значение по умолчанию:

EN div только #en div visible, 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/

Попробуйте следовать СУХОЙ принцип, это сделает ваш код более читаемым для людей.

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

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

Answer 2

Ваша ошибка повторяется в ваших селекторов, как:

$('fr[id^=fr], de[id^=de]') 

Это должно быть изменено по:

$('div[id^=fr], div[id^=de]') 

Для того чтобы иметь по умолчанию en только видимый, достаточно добавить к событию click щелчок триггера.

Сниппает и updated fiddle:

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

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

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

.button { cursor:pointer; padding: 0px 30px; }

<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 3

Так что в вашей скрипке вы не досчитались Jquery как комментарии, упомянутых выше. Во-первых, для того, чтобы иметь значение по умолчанию, вам нужно добавить скрытый класс.

.hidden { 
    display:none; 
} 

Это позволит вам установить скрытые теги по умолчанию.

<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 class="hidden" id="fr1">2</div> 
<div class="hidden" id="de1">3</div> 
<div id="en2">4</div> 
<div class="hidden" id="fr2">5</div> 
<div class="hidden" id="de2">6</div> 

Вы также указывать на некорректные селекторов вы указывающими на фр [ид^= фр] и то же самое для других. Вы должны заменить это на div [id^= country].

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

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

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