JQuery淡入一个，淡出多个div

Question

我有这样的功能：

$(document).ready(function(){
  $("#showt").click(function(){
    $(".t").fadeIn("fast");
  });
  $("#showt").click(function(){
    $(".m").fadeOut(0);
  });
  $("#showt").click(function(){
    $(".a").fadeOut(0);
  });
});

$(document).ready(function(){
  $("#showm").click(function(){
    $(".m").fadeIn("fast");
  });
  $("#showm").click(function(){
    $(".t").fadeOut(0);
  });
  $("#showm").click(function(){
    $(".a").fadeOut(0);
  });
});

$(document).ready(function(){
  $("#showa").click(function(){
    $(".a").fadeIn("fast");
  });
  $("#showa").click(function(){
    $(".t").fadeOut(0);
  });
  $("#showa").click(function(){
    $(".m").fadeOut(0);
  });
});

因此，单击具有特定 ID 的 link 时，它会显示一个，但会隐藏其他块，一切正常，但我只是感兴趣有没有一种方法可以减少函数的代码？

谢谢。

HTML:

<a href="#" class="tag" id="showt">ttt</a>
<a href="#" class="tag" id="showm">mmm</a> 
<a href="#" class="tag" id="showa">aaa</a>          

<div class="row">
  <div class="col-1"></div>
  <div class="col-2">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-3">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-4"></div>

Answer 1

您可以使用 toggle() 来切换当前状态。 here is the link for api

同样为了减少，你可以创建一个函数作为类似工作的回调函数。喜欢

$('.bar').click(callback);

Answer 2

您可以通过使用自定义属性大大整合您的代码；我选择名称 show-class 来表示 class link 想要显示。如果您计划添加更多的 classes 而不仅仅是 .t、.m 和 .a 您可以添加一个次要的 class 所有这些 (.t, .m, .a) 有共同点，然后淡出。此外，您可以使用 .hide() 函数使您的代码更简单一些（而不是 .fadeOut(0)）。

$(document).ready(function(){
  $(".showStuff").click(function (){
    $(".t, .m, .a").hide();
    $("." + $(this).attr("show-class")).fadeIn("fast");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="tag showStuff" show-class="t">ttt</a>
<a href="#" class="tag showStuff" show-class="m">mmm</a> 
<a href="#" class="tag showStuff" show-class="a">aaa</a>          

<div class="row">
  <div class="col-1"></div>
  <div class="col-2">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-3">
    <div class="t">
        Ttt
    </div>
    <div class="m">
        Mmm
    </div>
    <div class="a">
        Aaa
    </div>
</div>
<div class="col-4"></div>

JQuery淡入一个，淡出多个div

JQuery fadeIn one, fadeOut multiple divs

javascript

jquery

fadeout

fadein