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();
    });

但是当我点击按钮时，我看不到预订表格

Answer 1

在您的脚本中，您使用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();
});
});

Jquery切换不能在php foreach循环中工作

2 个答案: