複数のフォームを非表示にして、イベントをクリックしてフォームを表示する方法jquery

Question

文書の準備が整ったらjqueryを使用して、btn-primaryのいずれかをクリックすると表示と非表示になります行のそれぞれ。

jqueryの

<script> 
$(document).ready(function() { 
$('#table').DataTable(); 
$('#formmasuk').hide(); 
$('.btn-primary').click(function() { 
$('#formmasuk').show(); 
$('#buttonmasuk').hide(); 
    }); 
}); 
</script? 

HTML

<table id="example1" class="table table-bordered table-striped"> 
       <thead> 
        <tr style="center"> 
        <th>Nik</th> 
        <th>Nama</th> 
        <th>Jabatan</th> 
        <th>Masuk</th> 
        <th>Keluar</th> 
        </tr> 
       </thead> 
       <tbody> 
        <?php foreach($query as $row):?> 
       <tr> 
        <td><?php echo $row->nik ?></td> 
        <td><?php echo $row->nama ?></td> 
        <td><?php echo $row->jabatan ?></td> 
        <td> 
         <div id='buttonmasuk'> 
          <a class="btn btn-sm btn-primary" href="javascript:void()" 
    title="Masuk" onclick="masuk('<?php echo $row->id_kar;?>')">Masuk</a></div> 
         <div id='formmasuk'> 
          <form> 
          <input type="text" name="pass"> 
          </form> 
         </div> 
          <td> 
          <a class="btn btn-sm btn-danger" title="Keluar" ></i> 
     Keluar</a></td> 
        </tr> 
        <?php 
        endforeach ;?> 
       </tbody> 
       </table> 

このイメージ際に文書準備。 なぜすべてが隠されていないのですか？ 私はボタンmasuk（クラスBTN-プライマリ）のいずれかをクリックしたときに、私はCLIKがボタンmasuk（クラスBTN-プライマリ）のいずれかをクリックすると、その後、まだ

Answer 1

classに変更してください。

これは、次の

<div class='buttonmasuk'> 
... 
<div class='formmasuk'> 

ようにする必要があり、スクリプトがあなたが最初にあなたのDOMにjQueryライブラリを追加する必要があり、次の

$('.formmasuk').hide(); 
$('.btn-primary').click(function() { 
    $(this).closest('.formmasuk').show(); 
    $(this).closest('.buttonmasuk').hide(); 
}); 

Answer 2

あなたのhtmlを隠さ示し、他たい 示しid-sはそのページで一意でなければなりません。フォームに一意のIDを追加しようとしました。これは、同じ値 "formmasuk"を使用しているためです。

Answer 3

ようなこと あなたのindex.htmlでこのリンクを追加します

  ["http://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
      crossorigin="anonymous"] 

コードの2番目の行を削除します。datatablスクリプトからの コードが正常に動作しており、スクリプトタグを適切に終了してください。