0

我不知道这是否可能，但似乎应该是......

对于每个语句，我都有一个在 php 上运行的 javascript 弹出框。该应用程序是一种座位表。数据库表中有 50 张宴会桌，每张有 10 个座位和一个桌号。

我查询数据库并询问表活动字段设置为“是”的所有字段。然后对于每个表，我想显示一个弹出表单，以便用户可以为每个座位输入一个名称。问题是这样的。当我打开表单的第一个实例时，它显示表 id 为 1。当我打开表单的第二个实例时，我希望它显示表 id 2 - 但它显示表 id 1。我如何获取表单的每个实例显示“下一个”表？

这是我正在使用的代码：

     global $wpdb;
$seatings = $wpdb->get_results("SELECT * FROM bb_cl_seating WHERE table_active='yes' ");

    if (count($seatings)===0){
    echo "<h2>There are no tables - Would you like to add one?</a>"; 
    } else  {
    foreach($seatings as $seating){
?>

    <!-- link that opens popup -->

<a class="popup-with-form" href="#table-form" onclick="jQuery('#table-form-<?php echo $seating->table_id; ?>').show(); return false;">Open form</a><br />
<!-- form itself -->
<form method="post" id="table-form-<?php echo $seating->table_id; ?>" class="white-popup-block mfp-hide">
    <h1>Celebrity Luncheon Seating</h1>
    <fieldset style="border:0;">

        <ol>
            <li>
            Table Number: <?php echo $seating->table_id; ?>
            </li>
            <li>
                <label for="seat_one">Seat One</label>
                <input name="seat_one" type="text" id="seat_one" value="<?php echo $seating->seat_one; ?>" size="50" />
            </li>
            <li>
                <label for="seat_two">Seat Two</label>
                <input name="seat_two" type="text" id="seat_two" value="<?php echo $seating->seat_two; ?>" size="50" />
            </li>
            <li>
                <label for="seat_three">Seat Three</label>
                <input name="seat_three" type="text" id="seat_three" value="<?php echo $seating->seat_three; ?>" size="50" />
            </li>
            <li>
                <label for="seat_four">Seat Four</label>
                <input name="seat_four" type="text" id="seat_four" value="<?php echo $seating->seat_four; ?>" size="50" />
            </li>
            <li>
                <label for="seat_five">Seat Five</label>
                <input name="seat_five" type="text" id="seat_five" value="<?php echo $seating->seat_five; ?>" size="50" />
            </li>
            <li>
            <input name='table_id' type='hidden' id='table_id' value='<?php echo $seating->table_id; ?>' /><input name='table_active' type='hidden' id='table_active' value='<?php echo $seating->table_active; ?>' /><input name="update" type="submit" id="Submit" value="update" />
        </ol>
    </fieldset>
</form>

<?php   } // closes for each ?>

    <script type="text/javascript">
    jQuery(document).ready(function( $ ) {

    $('.popup-with-form').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#seat_one',

        // When elemened is focused, some mobile browsers in some cases zoom in
        // It looks not nice, so we disable it:
        callbacks: {
            beforeOpen: function() {
                if($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });
});

</script>
4

2 回答 2

0

你犯了一个大错误，就是你把 jQuery 函数 $('.popup-with-form') 放在循环中，它会为你生成很多函数，当你尝试点击时，它会调用 all 来收集对你不起作用的其他函数.

因此，当您使用 . [点] 运算符。

试试下面的代码

  global $wpdb;
$seatings = $wpdb->get_results("SELECT * FROM bb_cl_seating WHERE table_active='yes' ");

if (count($seatings)===0){
echo "<h2>There are no tables - Would you like to add one?</a>"; 
} else  {
foreach($seatings as $seating){  ?>

 <!-- link that opens popup -->
<a class="popup-with-form" href="#table-form">Open form</a><br />

<?php  } } ?>


<!-- form itself -->
<form id="table-form" class="white-popup-block mfp-hide">
<h1>Celebrity Luncheon Seating</h1>
<fieldset style="border:0;">

    <ol>
        <li>
        Table Number: <?php echo $seating->table_id; ?>
        </li>

    </ol>
</fieldset>


jQuery(document).ready(function( $ ) {
// pop up form script
$('.popup-with-form').magnificPopup({
    type: 'inline',
    preloader: false,
    focus: '#name',

    // When elemened is focused, some mobile browsers in some cases zoom in
    // It looks not nice, so we disable it:
    callbacks: {
        beforeOpen: function() {
            if($(window).width() < 700) {
                this.st.focus = false;
            } else {
                this.st.focus = '#name';
            }
        }
    }
});

});

</script>
于 2013-09-21T19:10:49.877 回答
0

我找到了答案 - 在 javascript 调用中，我需要让它知道有不止一个......并且还需要为每个实例调用一点 javascript，这与之前给出的提示不同

<!-- link that opens popup -->
<script type="text/javascript">
    jQuery(document).ready(function( $ ) {

    $('.popup-with-form-<?php echo $seating->table_id; ?>').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#seat_one',




        // When elemened is focused, some mobile browsers in some cases zoom in
        // It looks not nice, so we disable it:
        callbacks: {
            beforeOpen: function() {
                if($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });
});

</script>   


<a href="#popup-with-form-<?php echo $seating->table_id; ?>" class="popup-with-form-<?php echo $seating->table_id; ?>">Open popup</a><br />


<!-- form itself -->
<div id="popup-with-form-<?php echo $seating->table_id; ?>" class="mfp-hide white-popup">

<form method="post" >
    <h1>Celebrity Luncheon Seating</h1>
    <fieldset style="border:0;">

        <ul>
            <li>
            Table Sponsor: <?php echo $seating->sponsor; ?>
            </li>
            <li>
                <label for="seat_one">Seat 1</label>
                <input name="seat_one" type="text" id="seat_one" value="<?php echo $seating->seat_one; ?>" size="50" />
            </li>
            <li>
                <label for="seat_two">Seat 2</label>
                <input name="seat_two" type="text" id="seat_two" value="<?php echo $seating->seat_two; ?>" size="50" />
            </li>
            <li>
                <label for="seat_three">Seat 3</label>
                <input name="seat_three" type="text" id="seat_three" value="<?php echo $seating->seat_three; ?>" size="50" />
            </li>
            <li>
                <label for="seat_four">Seat 4</label>
                <input name="seat_four" type="text" id="seat_four" value="<?php echo $seating->seat_four; ?>" size="50" />
            </li>
            <li>
                <label for="seat_five">Seat 5</label>
                <input name="seat_five" type="text" id="seat_five" value="<?php echo $seating->seat_five; ?>" size="50" />
            </li>

        </ul>
    </fieldset>
    <fieldset style="border:0;">

        <ul>
            <li>
            Table Celebrity: <?php echo $seating->celebrity; ?>
            <li>
                <label for="seat_six">Seat 6</label>
                <input name="seat_six" type="text" id="seat_six" value="<?php echo $seating->seat_six; ?>" size="50" />
            </li>
            <li>
                <label for="seat_seven">Seat 7</label>
                <input name="seat_seven" type="text" id="seat_seven" value="<?php echo $seating->seat_seven; ?>" size="50" />
            </li>
            <li>
                <label for="seat_eight">Seat 8</label>
                <input name="seat_eight" type="text" id="seat_eight" value="<?php echo $seating->seat_eight; ?>" size="50" />
            </li>
            <li>
                <label for="seat_nine">Seat 9</label>
                <input name="seat_nine" type="text" id="seat_nine" value="<?php echo $seating->seat_nine; ?>" size="50" />
            </li>
            <li>
                <label for="seat_ten">Seat 10</label>
                <input name="seat_ten" type="text" id="seat_ten" value="<?php echo $seating->seat_ten; ?>" size="50" />
            </li>
            <li>
            <input name='table_id' type='hidden' id='table_id' value='<?php echo $seating->table_id; ?>' /><input name='table_active' type='hidden' id='table_active' value='<?php echo $seating->table_active; ?>' /><input name="update" type="submit" id="Submit" value="update" />
            </li>
        </ul>
    </fieldset>
</form>
</div>
于 2013-09-23T02:57:47.650 回答