Show/hide 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

您的错误在您的选择器中重复出现，例如：

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

这必须更改为：

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

为了使 en 默认只可见，只需将触发点击附加到点击事件即可。

代码段和 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 2

所以在你的 fiddle 中你遗漏了 jQuery 就像上面提到的评论一样。首先，为了获得默认值，您需要添加一个隐藏的 class.

.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();
});

Answer 3

这是我认为这段代码应该如何工作的 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();
});

Show/hide jquery 点击功能

Show/hide jquery click function

html

javascript

jquery

click

show-hide