Question

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

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

这是我的JSFIDDLE

这是我的代码：

＆＃13;

    $('#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();
    });

＆＃13;

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

＆＃13;

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：

＆＃13;

$('#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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

所以在你的小提琴中，你错过了jQuery，就像上面提到的评论一样。首先，为了有默认值，你需要添加一个隐藏的类。

@Html.Partial("SomePartialview",Model.thePartialViewModel)

这将允许您设置默认的隐藏标签。

.hidden {
  display:none;
}

您还指向了您指向fr [id ^ = fr]的错误选择器，而其他选择器也是如此。你应该用div [id ^ = country]替换它。

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

显示/隐藏jquery点击功能

3 个答案: