單擊后在div之外被隱藏並顯示的標簽后如何隱藏/顯示標簽a

Question

我有一些具有以下結構的html代碼。 當我單擊帶有“ moreCases”類的標簽a時，將顯示類“ container-cases”的div，而當我單擊帶有“ container-cases”類的div時，其隱藏，但帶有“ moreCases”的標簽a不會成為表演。我該如何解決？

HTML：

<a href="#!" class="moreCases show">more 1</a>
<div class="container-cases hide">
   <input type="text" />                 
   <a href="#!" class="lessCases">less 1</a>
</div>

JavaScript的：

$(document).ready(function () {
      $(".moreCases").each(function () {
          var more = $(this);
          more.click(function () {
              more.next().removeClass('hide').addClass('show');
              more.removeClass('show').addClass('hide');
          });
      });
      $(".lessCases").each(function () {
          var less = $(this);
          less.click(function () {
              less.parent().removeClass('show').addClass('hide');            
              less.prev(".moreCases").removeClass('hide').addClass('show');                                     
          });
      });
});

Answer 1

您必須在使用prev()之前將parent()作為目標：

less.parent().prev(".moreCases").removeClass('hide').addClass('show');

 $(document).ready(function () { $(".moreCases").each(function () { var more = $(this); more.click(function () { more.next().removeClass('hide').addClass('show'); more.removeClass('show').addClass('hide'); }); }); $(".lessCases").each(function () { var less = $(this); less.click(function () { less.parent().removeClass('show').addClass('hide'); less.parent().prev(".moreCases").removeClass('hide').addClass('show'); }); }); }); 

 .hide{ display: none; } .show{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#!" class="moreCases show">more 1</a> <div class="container-cases hide"> <input type="text" /> <a href="#!" class="lessCases">less 1</a> </div> 

Answer 2

刪除最后一個.addClass('hide')

 $(".moreCases").each(function () {
        var more = $(this);
        more.click(function () {
            more.next().removeClass('hide').addClass('show');
            more.removeClass('show');
        });
    });

工作實例

Answer 3

無需遍歷.moreCases和.lessCases而只需向其添加click事件即可。 除了因為點擊是上a標簽，防止默認行為通過添加e.preventDefault

 $(document).ready(function() { $(".moreCases").click(function(e) { $(this).next().removeClass('hide').addClass('show'); $(this).removeClass('show').addClass('hide'); }); $(".lessCases").click(function(e) { e.preventDefault(); $(this).parent().removeClass('show').addClass('hide'); $(this).parent().prev(".moreCases").removeClass('hide').addClass('show'); }); }); 

 .hide { display: none; } .show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#!" class="moreCases show">more 1</a> <div class="container-cases hide"> <input type="text" /> <a href="#!" class="lessCases">less 1</a> </div>