javascript - JQuery/Javascript 冲突？ - 根据选择选项显示/隐藏 div 不起作用

标签 javascript php jquery show-hide

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

我已经在自己这里工作了 - 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

非常感谢任何帮助。

最佳答案

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

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

编辑 正如 Jason 所指出的，问题是 div 不能是 table 元素的直接子元素。所以解决这个问题的一种方法是使用嵌套表。那就是变化<div id='block-1'>至 <table id='block-1'> .也就是说，我确信一定有更好的方法...

演示了此修复 here .

关于javascript - JQuery/Javascript 冲突？ - 根据选择选项显示/隐藏 div 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32924519/

上一篇：php - 如果条件错误，ajax 响应中的错误

下一篇：php - 我应该在获取后手动关闭数据库连接和语句的游标吗？

相关文章：

PHPExcel 设置 setRowHeight(-1) 和 setWrapText(true) 不会自动调整行的高度

php - Twilio 在通话中说动词

php - 与 MySQL 的交易？

Jquery 字体大小调整为 div 高度？

javascript - 使脚本标记中的函数不是全局的

javascript - 从浏览器单击后退按钮时显示图像预览

javascript - 构造函数 - 原型(prototype) - __proto__

javascript - 不允许提交多个表单

javascript - 变量设置为 Javascript 中 for 循环中的最后一个值

javascript - 鼠标按下时更改类，但鼠标松开时恢复它

©2024 IT工具网  联系我们