多個開關不適用於此事件（）事件

Question

使用此代碼jsfiddle時。

的JavaScript

function initialize() 
{ 
    $(document).ready(function() 
    { 
    $(".toggle_details").click(function() 
    { 
     console.log('page loaded here'); 
     //$(this). 
     $('.hidden_fair_details').slideToggle("slow"); 
     //$(this).parent().next(".hidden_fair_details").slideToggle("slow"); 
     console.log('page loaded here also'); 
    }); 
    });  
} 

// Now you have to call this code 
$(initialize); 

CSS

.hidden_fair_details 
{ 
    display:none;  
} 

HTML

<div class="cab_info"> 
     <!-- <div style="width:100%;float:left;background-color:#444;color:#ffffff;">Car Class</div> --> 
       <div class="one-head"> 
       Image of Car 

        <!-- <img src="http://localhost:81/aadesh_cabs/wp-content/uploads/2015/06/Etios.png" /> --> 
       </div> 
       <div class="two-head"> 
        4 + 1D     </div> 
       <div class="three-head">2+2H</div> 
       <div class="four-head">10</div> 
       <div class="five-head">2750 Rs. <br /> 
        <button class="toggle_details">Fair Details 2</button> 

       </div> 
       <div class="six-head"> 

       <a href="final-cab-booking.php?tbl=punemumbai&cabtype=Toyota Etios AC&rate=eco&email=Pune&city=Mumbai&date=2015-10-08">Book Now</a></div> 
       <div class="hidden_fair_details"> 

        Toll and Parking : Toll & Parking Extra<br /> 
        Driver Incentives : Inclusive<br /> 
       </div> 

      </div> 
<div class="cab_info"> 
     <!-- <div style="width:100%;float:left;background-color:#444;color:#ffffff;">Car Class</div> --> 
       <div class="one-head"> 
       Image of Car 

        <!-- <img src="http://localhost:81/aadesh_cabs/wp-content/uploads/2015/06/Etios.png" /> --> 
       </div> 
       <div class="two-head"> 
        4 + 1D     </div> 
       <div class="three-head">2+2H</div> 
       <div class="four-head">10</div> 
       <div class="five-head">2750 Rs. <br /> 
        <button class="toggle_details">Fair Details 2</button> 

       </div> 
       <div class="six-head"> 

       <a href="final-cab-booking.php?tbl=punemumbai&cabtype=Toyota Etios AC&rate=eco&email=Pune&city=Mumbai&date=2015-10-08">Book Now</a></div> 
       <div class="hidden_fair_details"> 

        Toll and Parking : Toll & Parking Extra<br /> 
        Driver Incentives : Inclusive<br /> 
       </div> 

      </div> 
<div class="cab_info"> 
     <!-- <div style="width:100%;float:left;background-color:#444;color:#ffffff;">Car Class</div> --> 
       <div class="one-head"> 
       Image of Car 

        <!-- <img src="http://localhost:81/aadesh_cabs/wp-content/uploads/2015/06/Etios.png" /> --> 
       </div> 
       <div class="two-head"> 
        4 + 1D     </div> 
       <div class="three-head">2+2H</div> 
       <div class="four-head">10</div> 
       <div class="five-head">2750 Rs. <br /> 
        <button class="toggle_details">Fair Details 2</button> 

       </div> 
       <div class="six-head"> 

       <a href="final-cab-booking.php?tbl=punemumbai&cabtype=Toyota Etios AC&rate=eco&email=Pune&city=Mumbai&date=2015-10-08">Book Now</a></div> 
       <div class="hidden_fair_details"> 

        Toll and Parking : Toll & Parking Extra<br /> 
        Driver Incentives : Inclusive<br /> 
       </div> 

      </div> 

我想擴大僅particul ar點擊。 現在都在同一時間開放。

Answer 1

你打電話給所有div的類.hidden_fair_details你只需要找到一個div，這是通過找到父div然後在其中找到.hidden_fair_details div完成的。

請參閱代碼：

function initialize() 
{ 
    $(document).ready(function() 
{ 
    $(".toggle_details").click(function() 
    { 
     console.log('page loaded here'); 
     var $parent = $(this).parents('div.cab_info') //Find Parent Div 
     var $toggle = $parent.find('.hidden_fair_details'); //Find Div within parent 
     $toggle.slideToggle("slow"); //Toggle Found Div 
     console.log('page loaded here also'); 
    }); 
}); 

} 

// Now you have to call this code 
$(initialize); 

JSFiddle