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的链接就会显示一个，但隐藏其他块，一切都运行得很完美，但我只是感兴趣，有没有办法减少函数的代码？

谢谢。

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

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

$（ '巴。'）上单击（回调）;

Answer 2

您可以使用自定义属性大大整合您的代码;我选择名称show-class来表示链接要显示的类。如果您计划添加的课程不仅仅是.t，.m和.a，那么您可以添加一个所有人（.t, .m, .a）共有的辅助课程，并且淡出那个。此外，您可以使用.hide()函数使代码更简单（而不是.fadeOut(0)）。

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery fadeIn one，fadeOut多个div

2 个答案: