が、私はこれが引き金 'クリック' に

Question

をクリックdiv要素が連続して表示するために取得しようとしている：

<script type='text/javascript'> 
    $('.booking').click(function(){ 
    $('#svc_panel')fadeIn(function(){ 
    $('#date_panel,#time_panel,#confirm_panel')hide(); 
    }); 
    }); 


      $('.date_button').click(function(){ 
       $('#date_panel').fadeIn(function(){ 
       $('#svc_panel,#time_panel,#confirm_panel,').hide(); 
       }); 
      }); 

      $('.time_button').click(function(){ 
       $('#time_panel').fadeIn(function(){ 
         $('#svc_panel,#date_panel,#confirm_panel').hide(); 
       }); 
      }); 

      $('.confirm_button').click(function(){ 
       $('#confirm').fadeIn(function(){ 
         $('#csvc_panel,#date_panel,#time_panel').hide(); 
       }); 
      }); 

    }); 
    </script> 

とHTML：：

<div id="svc_panel"> 

        <table style="margin-left:30px;width:100%;text-align:left;"> 

         <tr style="height:25px;"> 

          <th style="width:500px;font-weight:bold;font-size:14px;">Service</th> 

          <th style="width:100px;font-weight:bold;font-size:14px;">Duration</th> 

          <th style="width:100px;font-weight:bold;font-size:14px;">Cost</th> 

         </tr> 

         <tr> 

          <td><a href="#" class="date_button">First Service</a></td> 

          <td>60 Minutes</td> 

          <td>$100</td> 

         </tr> 

         <tr> 

          <td><a href="#" class="date_button">Second Service</a></td> 

          <td>30 Minutes</td> 

          <td>$60</td> 

         </tr> 

         <tr> 

          <td><a href="#" class="date_button">Third Service</a></td> 

          <td>90 Minutes</td> 

          <td>$140</td> 

         </tr> 

       </table> 

       </div> 

       <div id="date_panel"> 

        <p>user picks date: <input id="datepicker" class="time_button" type="text"></p> 

       </div> 

       <div id="time_panel"> 

        <div>user picks time on: <span id="target"></span></div> 

        <table> 

         <tr> 

          <td class="time_button"><a href="#">11:30 am</a></td> 

         </tr> 

         <tr> 

          <td class="time_button"><a href="#">12:30 pm</a></td> 

         </tr> 

         <tr> 

          <td class="time_button"><a href="#">2:00 pm</a></td> 

         </tr> 

        </table> 

       </div> 

       <div id="confirm_panel"> 

       You've chosen (service) on (date) at (time). Is this correct? <a href="#" class="confirm_button">Yes</a> 

       </div> 

ここ

<li class="booking"><a href="#page_7">Book Me</a></li> 

jQueryのどのようにこれらのdivがクリックで連続して表示されるようにしますか？

Answer 1

タイプミスはあなたの敵です。

$(document).ready(function(){ 

$('#svc_panel,#date_panel,#time_panel,#confirm_panel').hide(); 

$(".booking").click(function(){ 
$('#svc_panel').fadeIn(function(){ 
$('#date_panel,#time_panel,#confirm_panel').hide(); 

}); 
}); 


     $(".date_button").click(function(){ 
      $('#date_panel').fadeIn(function(){ 
      $('#svc_panel,#time_panel,#confirm_panel,').hide(); 
      }); 
     }); 

     $('.time_button').click(function(){ 
      $('#time_panel').fadeIn(function(){ 
        $('#svc_panel,#date_panel,#confirm_panel').hide(); 
      }); 
     }); 

     $('.confirm_button').click(function(){ 
      $('#confirm_panel').fadeIn(function(){ 
        $('#svc_panel,#date_panel,#time_panel').hide(); 
      }); 
     }); 

}); 

これは動作コードです。楽しい。

<li class="booking"><a href="#page_7">Book Me</a></li> 


<div id="svc_panel"> 

       <table style="margin-left:30px;width:100%;text-align:left;"> 

        <tr style="height:25px;"> 

         <th style="width:500px;font-weight:bold;font-size:14px;">Service</th> 

         <th style="width:100px;font-weight:bold;font-size:14px;">Duration</th> 

         <th style="width:100px;font-weight:bold;font-size:14px;">Cost</th> 

        </tr> 

        <tr> 

         <td><a href="#" class="date_button">First Service</a></td> 

         <td>60 Minutes</td> 

         <td>$100</td> 

        </tr> 

        <tr> 

         <td><a href="#" class="date_button">Second Service</a></td> 

         <td>30 Minutes</td> 

         <td>$60</td> 

        </tr> 

        <tr> 

         <td><a href="#" class="date_button">Third Service</a></td> 

         <td>90 Minutes</td> 

         <td>$140</td> 

        </tr> 

      </table> 

      </div> 

      <div id="date_panel"> 

       <p>user picks date: <input id="datepicker" class="time_button" type="text"></p> 

      </div> 

      <div id="time_panel"> 

       <div>user picks time on: <span id="target"></span></div> 

       <table> 

        <tr> 

         <td class="confirm_button"><a href="#">11:30 am</a></td> 

        </tr> 

        <tr> 

         <td class="confirm_button"><a href="#">12:30 pm</a></td> 

        </tr> 

        <tr> 

         <td class="confirm_button"><a href="#">2:00 pm</a></td> 

        </tr> 

       </table> 

      </div> 

      <div id="confirm_panel"> 

      You've chosen (service) on (date) at (time). Is this correct? <a href="#" class="confirm_button">Yes</a> 

      </div> 

http://jsfiddle.net/Incubator/sfhsS/16/