jQuery切換無法在PHP foreach循環中工作

Question

我使用jQuery切換單擊按鈕時試圖顯示預訂表格。

的HTML

foreach($result['apiAvailableBuses'] as $value){?>
    <tr>
</td>
        <td><?php echo $value['fare']; ?></td>
        <td>

            <?php echo $value['availableSeats'].'&nbsp;Seats'; ?>&nbsp;&nbsp;
            <input type="button" id="<?php echo $i; ?>" class="btn btn-primary" value="Book" name="Book">
        </td>
    </tr>
<tr class="main">
        <td colspan="5">
            <div class="well" id="result<?php echo $i; ?>">Booking form here</div>
        </td>
    </tr>
<?php $i++; } ?>

腳本

$(".main").hide();
$(".btn-primary").click(function(){
        var id=$(this).attr('id');
        $('#result'+id).toggle();
    });

但是當我點擊按鈕時，我看不到預訂表格div

Answer 1

在腳本中，您使用$(".main").hide();隱藏了父tr $(".main").hide(); 因此子元素的toggle無效。 要使其工作，您必須使父元素可見，然后切換div。

$(".main").hide();
$(".btn-primary").click(function(){
       $(".main").show();
    var id=$(this).attr('id');
    $('#result'+id).toggle();
});

現在應該可以了。

Answer 2

嘗試使用.on()

$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
    var id=$(this).attr('id');
    $('#result'+id).toggle();
});
});

更新

我想解釋的另一件事。 您正在單擊一個按鈕，然后獲取其ID，然后對其進行.toggle() 。

我想您也可以這樣做。

$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
    //var id=$(this).attr('id');
    //$('#result'+id).toggle();
    $(this).closest("tr").next("tr").find(".well").toggle();
});
});