Jquery切换在phpforeach循环中不起作用 - Jquery toggle not working in php foreach loop

Jquery toggle not working in php foreach loop

当我使用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

在脚本中，使用$(".main").hide();隐藏父tr，因此子元素的toggle不起作用。要使其工作，您必须使父元素可见，然后切换div。

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

现在它应该起作用了。

尝试使用.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();
});
});