Javascript 区分多组表格

我有一个如下所示的应用程序：

)在患者X的名字旁边有一个按钮，标签为“签入”。这将记录在服务器端

2） 单击“签入”按钮后，用户将看到一个下拉列表（替换初始按钮），其中包含用户可以选择的多个位置。从select中选择位置后，服务器端将再次更新

3） 然后，用户可能决定选择多个位置，重复步骤2

4） 最后，当用户选择完位置后，他在用户在步骤2和步骤3中单击“Check Out”的位置的同一选择中单击“Check Out”按钮。单击此按钮后，它将被发送到checkloc.php并被记录

5） 最后，下拉菜单将消失，并显示已签出的单词

现在，问题是页面上有许多患者（患者a、患者B、患者C、患者D等等）。当页面上有一名患者时，该过程的工作原理与上述步骤相同

不幸的是，当页面上有多个患者时，如果您（例如）单击患者A旁边的签入按钮，则会出现两个下拉列表，一个用于患者A（应该如此），一个用于患者B，即使没有人单击过姓名旁边的签入按钮

这是我的密码：

html:

签入
选择一个位置
1号检查室
2号检查室
3号检查室
4号检查室
退房
退房
登记入住
选择一个位置
1号检查室
2号检查室
3号检查室
4号检查室
退房
退房

和javascript/jquery

 <script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();  // Hide all Selects on screen
$('.finished').hide();        // Hide all checked Out divs on screen
$('.checkOut').hide();

$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkin.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.locationSelect').show();
            $('.checkOut').show();
        }
    });
});

$('.locationSelect').change(function() {
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
});

$('.checkOut').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            $('.locationSelect').hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.finished').show();
        }
    });
});

});
</script>

$（文档）.ready（函数（）{
$（'.locationSelect'）.hide（）；//隐藏屏幕上的所有选择
$（'.finished'）.hide（）；//隐藏屏幕上所有签出的div
$（'.checkOut'）.hide（）；
$（'.checkIn'）。单击（函数（）{
var$e=$（本）；
var数据=$e.data（“参数”）.split（“参数”）[1]；
//获取按钮的id（第一个按钮为1）
//您可以将其映射到数据库中的相应按钮。。。
$.ajax({
类型：“POST”，
url:“checkin.php”，
//用于在数据库中设置值的数据
数据：{“checkIn”：$（this.val（），“buttonId”：data}，
成功：函数（）{
//隐藏当前单击的按钮
$e.hide（）；
//获取按钮的即时表单
//在其中找到选择并显示。。。
$（'.locationSelect'）.show（）；
$（'.checkOut'）.show（）；
}
});
});
$（'.locationSelect'）.change（函数（）{
$e=$（此项）；
var数据=$e.data（“参数”）.split（“参数”）[1]；
//获取select的id（第一次选择为1）
//您可以将其映射到数据库中相应的select。。。
$.ajax({
类型：“POST”，
url:“changeloc.php”，
数据：{“locationSelect”：$（this）.val（），“selectid”：data}，
成功：函数（）{
//在这里做点什么
}
});
});
$（'.checkOut'）。单击（函数（）{
var$e=$（本）；
var数据=$e.data（“参数”）.split（“参数”）[1]；
//获取按钮的id（第一个按钮为1）
//您可以将其映射到数据库中的相应按钮。。。
$.ajax({
类型：“POST”，
url:“checkout.php”，
//用于在数据库中设置值的数据
数据：{“checkOut”：$（this.val（），“buttonId”：data}，
成功：函数（）{
//隐藏当前单击的按钮
$e.hide（）；
$（'.locationSelect'）.hide（）；
//获取按钮的即时表单
//在其中找到选择并显示。。。
$（'.finished'）.show（）；
}
});
});
});

---

谢谢你的帮助，如果你需要更多的细节或澄清，尽管问吧

问题是选择器

$（'.locationSelect'）

获取该类的所有元素。你需要一种方法把它缩小到正确的范围

最简单的方法是稍微更改html，将每组控件包装在自己的div或其他容器中（可能在ul中的li元素中）：

…以及签出单击处理程序中的相同内容

请注意，如果每组控件都已在其自己的容器中，则不需要添加新的div容器，例如，如果已在单个

元素或表格单元格或其他内容中包含这些控件，则可以使用

$container=$e.closest（“li”）

 <script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();  // Hide all Selects on screen
$('.finished').hide();        // Hide all checked Out divs on screen
$('.checkOut').hide();

$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkin.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.locationSelect').show();
            $('.checkOut').show();
        }
    });
});

$('.locationSelect').change(function() {
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
});

$('.checkOut').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            $('.locationSelect').hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.finished').show();
        }
    });
});

});
</script>

<div class="container">
    <button class="checkIn" data-param="button_1">Check In</button>    
    <form method='post' class='myForm' action=''>
     <select name='locationSelect' class='locationSelect' data-param='location_1'>
      <option value="0">Select a location</option>
      <option value='1'>Exam Room 1</option>
      <option value='2'>Exam Room 2</option>
      <option value='3'>Exam Room 3</option>
      <option value='4'>Exam Room 4</option>
     </select>
    </form>    
    <button class="checkOut" data-param="cbutton_1">Check Out</button>
    <div class='finished' style='color:#ff0000;'>Checked Out</div>
</div>

        // Hide the current Button clicked
        $e.hide();
        // get the current button's containing div
        var $container = $e.closest("div.container");
        // Get the immediate form for the button
        // find the select inside it and show...
        $container.find('.locationSelect').show();
        $container.find('.checkOut').show();