jQuery show / hide无法正常工作

Question

我在php中有以下循环：

foreach ($sid as $key => $value) {
    $sql = " a sql query ";
    $vehicle->rowQuery($sql);
    $numRows = $vehicle->rows;

        while ( $data = $vehicle->result->fetch_assoc()) {
            $vid            = $data['vid'];
            $vehicleName    = $data['vehicleName'];
            $noOfSeat       = $data['noOfSeat'];
            $seatBooked     = $data['seatBooked'];
            $supplierName   = $data['supplierName'];

            echo "<table class='table table-bordered table-condensed table-striped'>";
                echo "<tr>";
                    echo "<th colspan='4' class='success'>
                    <label class='checkbox-inline'>
                    <input type='checkbox' class='vehicleClass' name='vid[]' value='{$vid}'>$vehicleName<strong> ( $noOfSeat Seats available) - $supplierName
                    </label>
                    <div class='pull-right'><a href='#' class='hideMe'>Show/Hide</a></div></strong>&nbsp;
                    <input type='hidden' name='noOfSeat[$vid]' value='$noOfSeat'>
                    </th>";
                echo "</tr>";
                echo "<tr>";
                    echo "<th colspan='4'>All Seats</th>";
                echo "</tr>";

                $count = 0;
                for ($seat=1; $seat <= $noOfSeat; $seat++) {

                    if($count % 4 == 0) {
                        echo "</tr><tr class='toggleMe'>";
                    }
                    echo "<td><label class='checkbox-inline'><input type='checkbox' name='seatNo[$vid][]' value='$seat'>Seat $seat </label></td>";

                    $count++;
                }
            echo "</table>";
        }

    if( $numRows == 0 ) {
        echo "<table class='table table-bordered table-condensed table-striped'>";
        echo '<tr><td class="alert alert-warning">Your selected vehicle is not available.</td></tr>';
        echo "</table>";
    }
}

它的输出是这样的：

现在，我正在尝试使用以下jQuery显示并隐藏相应的所有席位复选框列表，我点击显示/隐藏链接：

$(document).ready(function(){
    $('.hideMe').click(function() {
        $(this).next('.toggleMe').toggle();
    });
});

但显示/隐藏它不起作用。你能告诉我怎么解决这个问题？

感谢。

===================

的更新

当循环结果为：

然后使用此代码它可以正常工作：

$(document).ready(function(){
    $('.hideMe').click(function() {
        $('.toggleMe').toggle();
    });
});

Answer 1

你使用ajax来获取HTML吗？ 如果是的话，你最好使用$('body').on('click,'.hideMe',function() {}) 并且tr不是.hideMe的下一个元素 你可以尝试这段代码。

$(document).ready(function(){
    $('body').on('click','.hideMe',function() {
        $(this).parents('table').find('.toggleMe').toggle();
    });
});

Answer 2

我认为您应该使用on('Click',function(){ })代替click尝试此

    $(document).ready(function(){
    $('body').on('click', '.hideMe', function() {
        $(this).next('.toggleMe').toggle();
    });
});

Answer 3

我认为您使用“<tr>”构建的结构在

中不正确

if($count % 4 == 0) { echo "</tr><tr class='toggleMe'>"; }

这将在每个toggleMe类的开头添加</tr>。