Несколько функций при нажатии кнопки дважды

Question

Итак, у меня есть таблица, где я могу нажать кнопку и «деактивировать» строку. Дезактивируя строку, все, что происходит, это изменения непрозрачности, и строка выглядит серой, что означает, что строка «Деактивирована». Кнопка «Деактивировать» также изменяется на «Активировать». То, что я хочу, - это иметь возможность затем нажать кнопку «Активировать» и уметь отменить серию строки, после чего кнопка изменится на «Деактивировать».

Вот некоторые из моего кода ...

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

Это хорошая идея, чтобы играть с классами вместо. Поэтому, если кнопка/строка деактивирована, введите класс и переключите ее одним нажатием кнопки.

Поэтому код может выглядеть следующим образом,

$('.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, если да, то мы будем просить пользователя, если он/она хочет, чтобы активировать его снова и соответственно внести изменения.

Если у row нет класса под названием deactivated, мы попросим у пользователя подтверждение деактивировать его и внести соответствующие изменения.

Мы использовали метод jQuery parents() для доступа к родительскому элементу с щелчком.