jQuery隱藏/顯示僅爲foreach的第一個元素的工作

Question

在asp.net視圖中隱藏/顯示對於foreach循環的第一個元素正常工作，但是對於其他元素不起作用。

腳本

$('#SelectedContainer').hide(); 
$(".data").click(function(e) { 
    e.preventDefault(); 
    $('#BrowseContainer').hide(); 
    $('#SelectedContainer').show(); 
}); 
$("#goback").click(function(e) { 
    e.preventDefault(); 
    $('#SelectedContainer').hide(); 
    $('#BrowseContainer').show(); 
}); 

HTML：

foreach (var ....){ 
<table border="1"> 
    <tr class="tableBody"> 
     <td> 
      <div id="SelectedContainer" class="container-fluid"> 
       <div class="row-fluid"> 
        <div><a id="goback" href="#">hide</a></div> 
        Test 
       </div> 
      </div> 
      <div id="BrowseContainer" class="container-fluid"> 
       <div class="row-fluid container"> 
        <a class="data" href="#">Show</a> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 
} 

什麼是我的問題嗎？

Answer 1

ID必須是唯一的，您應該使用公共類。您應該使用$.fn.closest()，然後您可以使用$.fn.find()來定位所需的元素。

在這個例子中，我使用了類而不是ID。

HTML

<table border="1"> 
    <tr class="tableBody"> 
     <td> 
      <div class="SelectedContainer container-fluid"> 
       <div class="row-fluid"> 
        <div><a class="goback" href="#">hide</a></div> 
        Test 
       </div> 
      </div> 
      <div class="BrowseContainer container-fluid"> 
       <div class="row-fluid container"> 
        <a class="data" href="#">Show</a> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

腳本

$('.SelectedContainer').hide(); 
$(".data").click(function (e) { 
    e.preventDefault(); 
    var table = $(this).closest('table'); 
    table.find('.BrowseContainer').hide(); 
    table.find('.SelectedContainer').show(); 
}); 

$(".goback").click(function (e) { 
    e.preventDefault(); 
    var table = $(this).closest('table'); 
    table.find('.SelectedContainer').hide(); 
    table.find('.BrowseContainer').show(); 
});