显示/隐藏jQuery的点击功能

Question

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

EN div只有#en div 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(); 
}); 

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> 

您还指着你指着FR [ID^= FR]和同为其他不正确的选择。你应该用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(); 
});