單擊動作在第二次單擊時起作用

Question

此代碼在首次點擊時即可正常運行。 當重復時，僅在第二次單擊同一元素時才起作用。 的HTML

<div id="monthly-table">
<a href="#" class="monthly active">Monthly</a>
<a href="#" onclick="subscriptionTable(this)" class="yearly">Yearly</a>
<h1>Monthly</h1></div><div id="yearly-table" style="display:none">
<a href="#" onclick="subscriptionTable(this)" class="monthly">Monthly</a>
<a href="#" class="yearly active">Yearly</a>
<h1>Yearly</h1></div>

腳本

function subscriptionTable(el) {
   $(el).on('click', function() {
       if ($('#yearly-table').is(':hidden')) {
          $('#yearly-table').show();
          $('#monthly-table').hide();
        } else {
         $('#yearly-table').hide();
         $('#monthly-table').show();
       }
      return false;
   });
};

Answer 1

與其使用嵌入式單擊處理程序注冊jQuery單擊處理程序，不如使用jQuery dom ready處理程序注冊單擊處理程序。

 jQuery(function($) { $('.period').on('click', function() { var $target = $($(this).attr('href')).show(); $('.target').not($target).hide(); return false; }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="monthly-table" class="target"> <a href="#" class="monthly active">Monthly</a> <a href="#yearly-table" class="yearly period">Yearly</a> <h1>Monthly</h1> </div> <div id="yearly-table" class="target" style="display:none"> <a href="#monthly-table" class="monthly period">Monthly</a> <a href="#" class="yearly active">Yearly</a> <h1>Yearly</h1> </div>