显示/隐藏 jquery 点击功能答案

【问题标题】：Show/hide jquery click function显示/隐藏 jquery 点击功能
【发布时间】：2016-09-21 16:14:02
【问题描述】：

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

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>

【问题讨论】：

你必须首先在你的代码中包含 jQuery
我该怎么做？
通过在您的 html 顶部添加 <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>。 Here 是这个的来源

标签： javascript jquery html click show-hide

【解决方案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();
});

【讨论】：

【解决方案2】：

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

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

这必须改为：

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

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

sn-p 和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>

【讨论】：

你是完全正确的我理解我的错误，非常感谢这正是我正在寻找的;你摇滚

【解决方案3】：

因此，在您的小提琴中，您缺少像上面提到的 cmets 一样的 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();
});

【讨论】：