区分多个组的形式

Question

我有一个看起来像这样的应用程序：

）旁边的病人X的名字是一个按钮标记入住。这被记录在服务器端。

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

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

4）最后，当用户进行选择的地点，他点击了退房按钮，在同一选择，其中用户在步骤2和3中点击了标题为“签出”的位置。点击后，它会发送到checkloc.php并记录下来。 5）最后，下拉消失，单词Checked出现。

现在，问题是，网页上有很多患者（患者A，患者B，C，D等）。当页面上有一名患者时，该流程就像上述步骤一样工作。

不幸的是，当你有一个以上的病人在页面上，如果（例如）点击检查在旁边的病人按钮，双下拉菜单出现，一个为患者A（像它应该）和一个对于患者B，即使没有人点击名称旁边的检查按钮。

这里是我的代码：

HTML：

<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> 

<!--START SECOND SET--> 

<button class="checkIn" data-param="button_2">Check In</button> 

<form method='post' class='myForm' action=''> 
<select name='locationSelect' class='locationSelect' data-param='location_2'> 
    <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_2">Check Out</button> 
<div class='finished' style='color:#ff0000;'>Checked Out</div> 

和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> 

感谢您的任何和所有帮助，如果您需要任何更多细节或澄清只是问！

Answer 1

问题是，您的选择器$('.locationSelect')得到所有与该类的元素。你需要一种方法将其缩小到合适的范围。

最简单的方法是稍微改变你的HTML来包装每个组的控制在自己的股利或其他容器中（或许在UL内li元素）：

<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(); 

...和结帐点击处理程序中的同样的事情。

请注意，如果每个控件组都已位于其自己的容器中，则不需要添加新的div容器，例如，如果您已经将它们放在单独的<li>元素或表格单元格内，或者可以使用$container = $e.closest("li")。 ..