多次切换不适用于 this() 事件

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>

我只想在点击时展开特定的 div。现在都在同时开放。

Answer 1

您用 class .hidden_fair_details 调用了所有 div，而您只需要找到一个 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

多次切换不适用于 this() 事件

Multiple toggle is not working for this() event

jquery

this

toggle