JQuery/Javascript冲突？ - Show/Hide div 基于 select 选项无效

Question

我有一个预订表格，我想根据 select 选项中的号码添加多名服务员。

我已经在自己这里工作了 - https://jsfiddle.net/dentjames/7buxvd87/1/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  

  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>

jQuery(function () {
    var $blocks = $('.block');
    $('#choices').change(function () {
        $blocks.slice(0, +this.value || 1).show();
        $blocks.slice(+this.value || 1).hide();
    }).change()
})

</script>

</head>
<body>
    <select id="choices">
        <option value="">Please choose number of children</option>
        <option value="1">1 Child</option>
        <option value="2">2 Children</option>
        <option value="3">3 Children</option>
        <option value="4">4 Children</option>
        <option value="5">5 Children</option>
    </select>
    <div id="block-1" class="block">
             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>First child</strong></div>
            </td>
        </tr>
          <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-2" class="block">
                <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Second child</strong></div>
            </td>
        </tr>

             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-3" class="block">
             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Third child</strong></div>
            </td>
        </tr>
                <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-4" class="block">
              <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Forth child</strong></div>
            </td>
        </tr>
               <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-5" class="block">
             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Fifth child</strong></div>
            </td>
        </tr>

                <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>

</body>

</html>

但是当我将它合并到主窗体中时，它不起作用。我确定与现有 javascript 存在一些冲突，并且可能与 php.

存在一些问题

完整表格可以在这里查看： http://whizzkidsclub.co.uk/horsham_bookingform_multiple.php

非常感谢任何帮助。

Answer 1

在 url (whizkidsclub...) 中，id 为 block-1、block-2 等的 div(s) 不包含任何元素。第一个 child、第二个 child 等控件在 div(s) 之外。

将您的控件移动到正确的 div(s)，它应该开始工作

Edit 正如 Jason 指出的，问题是 div 不能是 table 元素的直接 child。所以解决这个问题的一种方法是使用嵌套的 tables。也就是把<div id='block-1'>改成<table id='block-1'>。那就是说我确定一定有更好的方法...

演示了此修复程序 here。

Answer 2

您的 div（与 block-* id 一起）被浏览器从 table 中拉出并插入到 [= 之前15=]。上面是空的。我认为 div 不能作为 table 的直系子代。看看这个：http://jsfiddle.net/f9t4qqmw/

来源：

<table>
    <div>
        <tr><td>1234</td></tr>
        <tr><td>abcd</td></tr>
    </div>
</table>

已检查：

<div></div>
<table>
    <tbody>
        <tr><td>1234</td></tr>
        <tr><td>abcd</td></tr>
    </tbody>
</table>

JQuery/Javascript冲突？ - Show/Hide div 基于 select 选项无效

JQuery/Javascript conflict? - Show/Hide div based on select option not working

javascript

php

jquery

show-hide