ボタンを2回クリックすると複数の機能が表示される

Question

現在、私はボタンを押して行を「非アクティブ化」できるテーブルを持っています。行を無効にすると、不透明度が変更され、行がグレー表示され、行が「無効化」されます。 「Deactivate」ボタンも「Activate」に変わります。私が望むのは、 "Activate"ボタンを押して行を消すことができ、ボタンが "Deactivate"に戻ってしまうことです。ここで

私のコードのいくつか...

HTML/PHPです：

<tr> 
    <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
    <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
    <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
    <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
    <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
    <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
    <td><button class="edit" name="edit">Edit</button> 
    <button class="deactivate" name="deactivate">Deactivate</button></td> 
</tr> 

はJavaScript：

// ----- Deactivate Row ----- 

$(document).ready(function() { 
    $('.deactivate').click(function() { 
    var $this = $(this); 

    if ($this.html() === 'Deactivate') { 
     $this.html('Activate'); 
     var result = confirm("Are you sure you want to deactivate this entry?"); 
     if(result) { 
     $this.closest('tr').css('opacity', 0.5); 
     } 
    } 
    }); 
}); 

Answer 1

あなたは少しだけ組み込むために、あなたのロジックを再構築する必要があり、これを達成するために、それはアクティブな状態を示すために使用することができるtr要素のクラスです。それは、代わりにクラスでプレイすることをお勧めします

$(document).ready(function() { 
 
    $('.deactivate').click(function() { 
 
    var $this = $(this); 
 
    var $tr = $this.closest('tr'); 
 
    var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate'; 
 

 
    if (confirm('Are you sure you want to ' + action + ' this entry?')) { 
 
     $tr.toggleClass('deactivated'); 
 
     $this.text(function(i, t) { 
 
     return t == 'Deactivate' ? 'Activate' : 'Deactivate'; 
 
     }); 
 
    } 
 
    }) 
 
});

.deactivated { 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

：これを試してみてください。したがって、ボタン/行が非アクティブ化されている場合、そのクラスにクラスを与え、ボタンをクリックするとそのクラスを切り替えることができます。

彼/彼女はそれを再度アクティブにしたい場合ははい、我々はユーザーに尋ねるかどうrowは、deactivatedというクラスを持っているのであれば、コードは、次のように上記のコードで

$('.deactivate').click(function() { 
     var $this = $(this); 
     var parentrow=$(this).parents('tr'); 
     if (parentrow.hasClass('deactivated')) { 
      var result = confirm("Are you sure you want to activate this entry?"); 
      if (result) { 
       $this.html('Deactivate'); 
       parentrow.css('opacity', 1); 
      } 
     } else { 
      var result = confirm("Are you sure you want to deactivate this entry?"); 
      if (result) { 
       $this.html('Activate'); 
       parentrow.css('opacity', 0.5); 
      } 
     } 
     parentrow.toggleClass('deactivated'); 
}); 

を見えるかもしれません私たちは、最初にチェックしていますそれに応じて変更を行います。

rowにはdeactivatedという名前のクラスがない場合、ユーザーに確認を求め、それに応じて変更を行います。

クリックした要素の親にアクセスするために、parents() jQueryのメソッドを使用しました。