區分多個組的形式

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")。 ..