ビュー内の各レコードのJavaScript

Question

私は15レコード（15行）と5列のテーブルを表示するビューを持っていますが、重要なことは「アクション」という列です。その中に私は1つのボタン、 "プレビュー"、クリックすると、テスト用にメッセージ付きのウィンドウを開きたいと思っています。

ただし、「表​​示」ボタンをクリックすると最初のレコードのみがメッセージウィンドウを表示し、その他の14個のレコードは表示されません。

すべてのレコード/行にメッセージを表示させるにはどうすればよいですか？

<table class="table table-bordered table-hover tablesorter"> 
    <thead> 
     <tr> 
      <th class="header text-center" style="width: 100px;"> Ações </th> 
     </tr> 
    </thead> 
    <tbody id="tabela">  
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @this.Hidden("IdClient").Value(item.Id) 
        <a id="visualizarCliente" class="btn btn-primary btn-xs btn-visualizar" data-toggle="tooltip" title="Visualizar" target="_blank" 
         href="@Url.Action(MVC.Painel.Clientes.Visualizar(item.Id))"> 
         <i class="fa fa-eye"></i> 
        </a> 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 

<script type="text/javascript"> 
    $(function() { 
     $("#visualizarCliente").click(function() { 
      var idCliente = $("#IdClient").val(); 
      window.alert("Teste"); 
     }) 
    }); 
</script> 

Answer 1

問題は、あなたはIDセレクタを使用していて、それが繰り返されることができないということである。

は、以下のコードに従ってください。他のセレクタ（data-toggle = "tooltip"など）に切り替えます。

<script type="text/javascript"> 
    $(function() { 
     $("a[data-toggle='tooltip']").click(function() { 
      window.alert("Teste"); 
     }) 
    }); 
</script> 

Answer 2

問題は常にユニークなもののために使用することがIDです。代わりにCLASSを使用してみてください。あなたの関数はこの1つの例のようなものになるはずです。与えられた例では

$(function() { 
     $(".btn-visualizar").click(function() { 
      var idCliente = $(this).parent().find("#IdClient").val(); 
      window.alert("Teste"); 
     }) 
    }); 

を行$(this).parent().find("#IdClient").val();が、これはそれがあるべきようには最寄の要素値だだろうことを指定します。