Question

如何优化 jQuery 隐藏/显示列表？

    $(document).ready(
        function() {
            $("#call_ads").click(function() {
                $("#ads").toggle("slow");
                $("#chats").hide("slow");
                $("#all-active-ads").click(function() {
                    $(".active_ads").show("slow");
                    $(".inactive_ads").hide("slow");
                    $(".all_ads").hide("slow");
                });
                $("#all-inactive-ads").click(function() {
                    $(".inactive_ads").show("slow");
                    $(".active_ads").hide("slow");
                    $(".all_ads").hide("slow");
                });
                $("#all-ads").click(function() {
                    $(".all_ads").show("slow");
                    $(".inactive_ads").hide("slow");
                    $(".active_ads").hide("slow");
                });
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class="nav navbar-nav admin-navbar">
  <li id="call_ads"><a><span class="fa fa-newspaper-o"></span> | Skelbimai</a></li>
  <li id="call_discussions"><a><span class="fa fa-commenting-o"></span> | Diskusijos</a></li>
  <li id="call_news"><a><span class="fa fa-rss"></span> | Straipsniai</a></li>
  <li id="call_paid_ads"><a><span class="fa fa-star-o"></span> | Reklamos</a></li>
  <li id="call_chats"><a><span class="fa fa-envelope-o"></span> | Susirašinėjimai</a></li>
  <li id="call_mods"><a><span class="fa fa-user-circle-o"></span> | Moderatoriai</a></li>
  <li id="call_users"><a><span class="fa fa-user-o"></span> | Vartotojai</a></li>
</ul>
<!-- in admin header -->


<!-- in view -->
<div class="active_ads" style="display: none;">
  <h1 class="text-centert">Patvirtinti skelbimai</h1>
  <table class="table table-striped table-hover ">
    <thead>
      <tr>
        <th>#</th>
        <th>Pavadinimas</th>
        <th>E. Paštas</th>
        <th>Paskelbtas</th>
        <th>Vartotojas</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach($active_ads as $active_ad) : ?>
      <tr class="success">
        <td>
          <?= $active_ad['id']; ?>
        </td>
        <td>
          <?= $active_ad['title']; ?>
        </td>
        <td>
          <?= $active_ad['email']; ?>
        </td>
        <td>
          <?= $active_ad['created_at']; ?>
        </td>
        <td>
          <?= $active_ad['active']; ?>
        </td>
      </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</div>
<div class="inactive_ads" style="">
  <h1 class="text-centert">Nepatvirtinti skelbimai</h1>
  <table class="table table-striped table-hover ">
    <thead>
      <tr>
        <th>#</th>
        <th>Pavadinimas</th>
        <th>E. Paštas</th>
        <th>Paskelbtas</th>
        <th>Vartotojas</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach($inactive_ads as $inactive_ad) : ?>
      <tr class="warning">
        <td>
          <?= $inactive_ad['id']; ?>
        </td>
        <td>
          <?= $inactive_ad['title']; ?>
        </td>
        <td>
          <?= $inactive_ad['email']; ?>
        </td>
        <td>
          <?= $inactive_ad['created_at']; ?>
        </td>
        <td>
          <?= $inactive_ad['active']; ?>
        </td>
      </tr>
      <?php endforeach; ?>

    </tbody>
  </table>
</div>
<div class="all_ads" style="display: none;">
  <h1 class="text-centert">Visi skelbimai</h1>
  <table class="table table-striped table-hover ">
    <thead>
      <tr>
        <th>#</th>
        <th>Pavadinimas</th>
        <th>E. Paštas</th>
        <th>Paskelbtas</th>
        <th>Vartotojas</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach($ads as $ad) : ?>
      <tr class="info">
        <td>
          <?= $ad['id']; ?>
        </td>
        <td>
          <?= $ad['title']; ?>
        </td>
        <td>
          <?= $ad['email']; ?>
        </td>
        <td>
          <?= $ad['created_at']; ?>
        </td>
        <td>
          <?= $ad['active']; ?>
        </td>
      </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

更多优化： -
试试这个

$(document).ready(
        function() {
            $("#call_ads").click(function() {
                $("#ads").toggle("slow");
                $("#chats").hide("slow");
                $("#all-active-ads,#all-ads,#all-inactive-ads").click(function() {
                    $(".inactive_ads , .all_ads,.active_ads").hide("slow");
                    if($(this).attr('id')=='all-inactive-ads'){
                        $(".inactive_ads").show("slow");
                    }else if ($(this).attr('id')=='all-active-ads'){
                        $(".active_ads").show("slow");
                    }else if ($(this).attr('id')=='all-ads'){
                        $(".all_ads").show("slow");
                    }
                });
            });
        });

修改： -
试试这个

function() { $("#call_ads").on('click',function() { $("#ads").toggle("slow"); $("#chats").hide("slow"); $("#all-active-ads,#all-ads,#all-inactive-ads").on('click',function() { $(".inactive_ads ,.all_ads,.active_ads").hide("slow"); if($(this).attr('id')=='all-inactive-ads'){ $(".inactive_ads").show("slow"); }else if ($(this).attr('id')=='all-active-ads'){ $(".active_ads").show("slow"); }else if ($(this).attr('id')=='all-ads'){ $(".all_ads").show("slow"); } }); }); });

它适合您。只需.click(function() {
更改.on('click',function() {

Answer 2

应该是这样的 https://jsfiddle.net/ipsjolly/6u79bdzy/4/

<强> HTML

<div id="ads">ads</div>
<div id="chats">chats</div>
<div class="active_ads">active_ads</div>
<div class="inactive_ads">inactive_ads</div>
<div class="all_ads">all_ads</div>


<button id="call_ads">call_ads</button>
<button id="all-active-ads">all-active-ads</button>
<button id="all-inactive-ads">all-inactive-ads</button>
<button id="all-ads">all-ads</button>

<强>的jQuery

 $(document).ready(
        function() {
            $("#call_ads").click(function() {
                $("#ads").toggle("slow");
                $("#chats").hide("slow");
            });

          $("#all-active-ads").click(function() {
            $(".active_ads").show("slow");
            $(".inactive_ads,.all_ads").hide("slow");
          });
          $("#all-inactive-ads").click(function() {
            $(".inactive_ads").show("slow");
            $(".active_ads,.all_ads").hide("slow");
          });
          $("#all-ads").click(function() {
            $(".all_ads").show("slow");
            $(".inactive_ads,.active_ads").hide("slow");
          });
});

Answer 3

您可以合并所有要点击的元素并使用switch-case。这将优化以及使代码可读和可扩展。 switch-case始终推荐if-else if-else，$(document).ready( function() { $("#call_ads").click(function() { $("#ads").toggle("slow"); $("#chats").hide("slow"); }); $("#all-active-ads,#all-inactive-ads,#all-ads").click(function() { $(".active_ads,.inactive_ads,.all_ads").hide("slow"); // hide all of them. switch-case will take care of what to show... switch ($(this).attr('id')) { case 'all-active-ads': $(".active_ads").show("slow"); break; case 'all-inactive-ads': $(".inactive_ads").show("slow"); break; case 'all-ads': $(".all_ads").show("slow"); break; } }); });遍历

{{1}}

如何优化jquery隐藏/显示列表？

3 个答案: