[英]Multiple Functions When Clicking a Button Twice
所以我目前有一個表格,我可以在其中按下一個按鈕並“停用”一行。 通過停用該行,所發生的只是不透明度變化並且該行顯示為灰色,表示該行已“停用”。 “停用”按鈕也變為“激活”。 我想要的是能夠然后點擊“激活”按鈕並能夠取消該行的灰色,然后按鈕將變回“停用”。
這是我的一些代碼...
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);
}
}
});
});
要實現這一點,您只需要稍微重構您的邏輯以在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>
用類來代替是個好主意。 因此,如果按鈕/行被停用,則為其指定一個類並在單擊按鈕時切換相同的類。
所以代碼可能看起來像這樣,
$('.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()方法來訪問被點擊元素的父元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.